CSS - 애니메이션 속성

전환효과보다 부드럽게 전환효과를 제어 가능 (세부적, 디테일하게 제어 가능)

 

keyframe 규칙 정의필요

@keyframes 고유한이름 {

                0%{

                    background-color: blue;

                }

                100%{

                    background-color: orange;

                }

            }

 

(최소조건)

animation-name: 키프레임명;

animation-duration: 적용시간;

0% 100%대신에 from to로 해도 무관

0% 25% 50% 100%등 여러 지점 추가 가능

 

animation-delay: 지연시간;

animation-fill-mode → 애니메이션이 종료된 후의 상태 지정

none : 실행되기전 원상태, 실행 후 원상태

forwards : 시작지점의 스타일을 적용하지 않고 대기, 실행이 끝나면 종료 스타일로 유지 (주로 사용)

backwards : 시작지점의 스타일을 적용하고 대기, 실행 후 원상태

both : 시작지점의 스타일을 적용하고 대기, 실행이 끝나면 종료 스타일로 유지

 

animation-iteration-count: 특정횟수;

애니메이션을 여러번 반복하게 함

 

animation-play-state: paused; (기본값 running)

.box:hover {

                animation-play-state: paused;

            }

 

animation-direction: normal; (애니메이션 진행 방향)

reverse(역방향), alternate(실행되는 횟수에따라 normal, reverse 번갈아서)

alternate-reverse(reverse, normal 번갈아서)

 

animation-timing-function으로 애니메이션 속도 제어 가능

 

animation 속성 (한번에 적는거)

animation: 애니메이션이름 2s 2s forwards 5 running alternate-reverse ease