<CSS 기초> 13. Transition & Animation

 

 이번 장에서 다룰 내용은 트랜지션과 애니메이션이다. 둘다 뭔가 움직이거나 변경되는 것을 나타낼 대 사용한다.

 

1. Transition

 트렌지션의 경우 호버와 같은 곳에 속성의 다른 변화값을 적어 둔 곳이 있을 때, 즉 어떤 조건으로 인해 변화가 생길 때 자연스럽게 그 속성으로 변화하는 것을 보여주는 속성이다.

 

transition : font-size 2500ms ease-in 1s

 

 트랜지션에 적을 수 있는 값은 property, duration, timing-function, delay가 있다. 하나씩 알아보자.

 

 - property : 속성은 변화가 일어나는 속성이 무엇인지 적으면 된다. 기본값은 all이다. 작성하지 않으면 현재 개체의 변경이 이루어지는 모든 속성에 대해 트랜지션이 작동한다.

 

 - duration : 지속기간을 의미한다. ms와 s 단위를 작성할 수 있다. 참고로 1000ms = 1s 이다.

 

 - timing-funtion : 타이밍함수는 대표적으로 cubic-bezier, ease-in, ease-out, ease-in-out 이 있다. ease-in은 천천히 바뀌다가 빨라지게 하는 값이며, out은 그 반대이다. ease-in-out은 그 둘을 모두 적용할 수 있다. cubic-bezier은 구글링을 통해 직접 함수를 만들어서 복사하여 사용하는 것을 추천한다. 기본값은 ease-in이다.

https://cubic-bezier.com/

  구글에 cubic bezier을 검색하면 위 사이트를 찾을 수 있다. Go버튼을 통해 타이밍이 어떻게 이루어지는지 비교도 가능하다.

 

- delay : 딜레이는 말그대로 트랜지션이 얼마 후에 일어날 건지 정하는 속성이다.

 

 ※ 참고로 트랜지션은 아래와 같이 여러개를 지정할 수 있다.

transition : color 2500ms ease-out, background-color 2500ms ease-in

 

2. Animation

 애니메이션은 트랜지션보다 좀 더 동적이다. @keyframes name { } 을 이용하여 애니메이션을 만들어서 그것을 불러와서 사용하는 방식이다. from과 to를 사용하거나 0% 부터 100%까지 나눠서 애니메이션을 지정한다. 즉 트랜지션과 달리 키프레임을 추가할 수 있다.

.test01 {
    width: 100px;
    height: 10px;
    animation-name: ani_01;
    animation-duration: 2500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;

}


@keyframes ani_01 {
    0% {
        width: 0;
        opacity: 1;
    }

    80% {
        width: 100%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

* 기본

 - name : 애니메이션의 이름을 지정할 수 있다. 애니메이션을 사용하려는 곳에 animation-name 속성으로 그 이름을 값으로 줘서 불러오게 한다.

 

 - duration : 지속기간을 의미한다. animation-duration 속성으로 줄 수 있다. 참고로 이 시간이 끝나면 가장 초기의 상태로 돌아간다.

 

 - timing-function : 트랜지션과 동일하게 타이밍을 줄 수 있다.

 

 - iteration-count : 몇 번이나 되풀이할 지를 정할 수 있다. animation-iteration-count 에 정수의 값을 주면 그만큼 되풀이하며, infinite 를 입력하면 계속 반복한다.

 

 - direction : 애니메이션의 방향을 지정하는 것이다. animation-direction 에 alternative, reverse와 같은 값을 입력 할 수 있다. 리버스는 말그대로 거꾸로 보여주는 것이고 alternative는 왔다갔다하는 방식이다. alternative-reverse는 거꾸로 시작하여 왔다갔다하는 방식이다.

 

- animation: sample-ani 3s linear forwards; 이와 같이 간결하게 사용도 가능하다. 이 때 forwards는 애니메이션이 끝났을 때 그 끝난 상태를 그대로 유지하도록 한다.

 

 - animation-play-state : 기본 값은 running이다. paused를 이용하면 일시정지가 이루어진다. 이를 호버에 넣어주면 마우스를 가져다 대면 일시정지하도록 만들 수 있다.

 

* 활용

 - 애니메이션의 기능을 이용하여 우리는 스프라이트 이미지를이용해 frame by frame 애니메이션도 만들 수 있다.

 - 먼저 당연히 가로로 길게 늘어져있는 스프라이트 이미지를 받아야한다. 참고록 요즘은 이미지를 두배 크기로 만들어 고해상도로 쓸 수 있게하므로 이미지를 받았다면 css에서는 1/2 크기로 사용하자.

 - 가로가 6000px이고 세로가 400px인 스프라이트를 사용한다고 가정하자.

@keyframes ani-01 {
	to {
		background-position: -3000px 0;
	}
}

.character-harry{
	width: 200px;
	height: 200px;
	background: url('./images/sprite_harry.png') no-repeat 0 0 / auto 200px;
	animation: ani-01 1s infinite steps(15);
}

 - 절반의 크기로 사용할 것이기 때문에 가로는 3000이고 세로는 200으로 줄여서 사용할 것이다.

 

 - 애니메이션은 가로의 끝까지 이동되도록 키프레임에 작성하였다.

 

 - 백그라운드에 이미지를 삽입하고 크기는 cover을 사용하거나 /를 이용하여 사이즈를 작성할 수 있다.

 

 - 애니메이션의 값으로 기존과 같이 작성하면, 우리가 원한 frame by frame이 아닌 그냥 쭉 옆으로 움직이는 이미지가 나올 것이다. 이 때 필요한 속성이 steps()이다. 이는 프레임 단계별로 이동시키도록 하게한다. 각 이미지의 크기가 200*200이므로 3000을 200으로 나눈 15를 넣어주면 스프라이트이미지가 정상적으로 애니메이션으로 보이게 된다.

 

- 참고로 GIF를 사용하려고 할 수도 있지만 이는 치명적인 단점들이 존재한다. 먼저 투명도가 조절이 안되고, 테두리도 지저분해진다. 또 속도나 역재생등의 여러가지 속성들을 조정할 수 없다.

 

 

 

tip : button, input, textarea와 같은 form속성들은 개별적으로 폰트지정을 해야 먹힌다.

 

 

 

---

 

 

참고

 

이 글은 구름에듀와 인프런에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

인터랙티브 웹 개발 제대로 시작하기 - 인프런