TIL7 - CSS animation

animation

animation 효과도 마찬가지로 HTML 요소들을 부드럽게 변화시키는 기능을 한다. animation은 transition을 사용할 때보다 더 유연한 기능을 보여준다. transition 효과는 요소 속성값이 다른 값으로 변화할 때 주로 사용하며 또한 transition을 사용할 때는 :hover와 같은 부가적인 행동이 필요하다는 특징을 가지고 있다.

그와 반대로 animation은 속성의 변화 뿐만 아니라 세부적인 움직임을 시간 단위로 제어할 수 있고 재생과 제어, 정지, 반복까지 실행할 수 있다.

• animation-name : @keyframes 애니메이션 이름을 지정함.
• animation-duration : 1 사이클에 소요되는 시간을 s단위 ms단위로 지정함.
• animation-timing-function : 애니메이션 효과 실행 속도를 결정함.
• animation-delay : 요소 로드 시작 지점부터 애니메이션 실행 시간 사이의 대기시간을 지정함.
• animation-iteration-count : 애니메이션을 반복할 재생 횟수
• animation-direction : 애니메이션이 종료된 이후 진행할 방향을 지정함.
• animation: name duration timing-function delay iteration-count direction

@keyframes animation-name

@keyframes animation-name {
	/*애니메이션 시작 시점*/
	from {시작할 때 발생하는 상태}
    /*애니메이션 종료 시점*/
    to {끝날 때 발생할 상태}
}

시간의 흐름에 따라 애니메이션을 어떻게 진행할지 정의할 수 있다.
from, to 이외에 더 세부적으로 애니메이션을 설정하고 싶다면 %를 사용할 수도 있다.

@keyframes animation-name {
	/*시작 시점*/
    0%{}
    /*중간 시점*/
    50%{}
    /*종료 시점*/
    100%{}
}

animation-duration

animation-name, @keyframes와 함께 animation-duration은 반드시 지정하도록 한다. 만약 지정하지 않는다면 이 속성의 기본값은 0이기 때문에 애니메이션이 동작하지 않는다. 단위는 초(s), 밀리 초(ms) 단위로 설정한다.

animation-timing-function

transition-timing-function과 동일하다. 자세한 설명은 여기를 참조하자.

animation-iteration-count

/*반복 횟수를 지정한다.*/
animation-iteration-count: 5;
animation-iteration-count: infinite; /*무한반복*/

animation-direction

• normal : 기본값. from -> to 방향으로 진행함.
• reverse : to -> from 방향으로 진행함.
• alternate : 홀수 번째는 normal로, 짝수 번째는 reverse
• alternate-reverse : 홀수 번째는 reverse로, 짝수 번째는 normal

참고 : https://poiemaweb.com/css3-animation