CSS animation 속성

animation 속성

 

- animation-direction : 애니메이션의 진행 방향을 설정

div {
    animation-direction : normal; /* 기본값, 애니메이션의 순방향 실행 (시작 -> 끝) */
    animation-direction : reverse; /* 애니메이션의 역방향 실행 (끝 -> 시작) */
    animation-driection : alternate; /* 애니메이션의 순방향으로 시작하고 마지막 키프레임에 도달하면 역방향으로 진행 (시작 -> 끝 -> 역방향 -> 시작 -> 끝 -> ...) */
    animation-driection : alternate-reverse; /* 역방향으로 시작하여 순방향으로 진행 (끝 -> 시작 -> 역방향 -> 끝 -> 시작 -> ...) */
}

 

 

 

 

- animation-delay : 애니메이션이 시작하기 전에 대기하는 시간을 설정

div {
    animation-delay : 3s; /* 3초 대기 후 애니메이션 실행 */
}

 

 

 

- animation-duration : 애니메이션이 하나의 주기를 완료하는데 걸리는 시간을 지정

div {
    animation-duration : 2s /* 애니메이션이 2초동안 실행 */
}

 

 

 

- animation-iteration-count : 애니메이션이 반복되는 횟수를 지정하는데 사용

div {
    animation-iteration-count : 3; /* 애니메이션 세 번 반복 */
    animation-iteration-count : infinite; /* 애니메이션 무한 반복 */
}

 

 

 

- animation-play-state : 애니메이션의 재생 상태를 설정

div {
    animation-play-state : paused; /* 애니메이션이 일시 정지된 상태 */
    animation-play-state : running; /* 애니메이션이 실행중인 상태 */
}

 

 

 

- animation-timing-function : 애니메이션의 시간에 따른 속도 변화를 설정

div {
    animation-timing-function : ease; /* 기본값, 천천히 시작되고 끝에서는 빠르게 진행 */
    animation-timing-function : linear; /* 시작부터 끝까지 일정한 속도로 진행 */
    animation-timing-function : ease-in; /* 천천히 시작 */
    animation-timing-function : ease-out; /* 끝에서 빠르게 진행 */
    animation-timing-function : ease-in-out; /* 시작과 끝에서 천천히 시작되고 끝에서는 빠르게 진행 */
    animation-timing-function : cubic-bezier(); /* 사용자 정의 베지어 곡선을 사용하여 타이밍 함수를 지정 */
    
}

 

 

* animation-timing-function을 커스텀 참고 링크

1. Cubic Bezier Builder : cubic-bezier 값을 조절하여 함수를 만들 수 있다.

https://cubic-bezier.com/

cubic-bezier.com

 

 

2. Easing Functions Cheat Sheet : 다양한 기본 및 커스텀 애니메이션 타이밍 함수를 제공

https://easings.net/

Easing Functions Cheat Sheet

 

 

 

- animation-fill-mode : 애니메이션이 시작하기 전이나 끝난 후에 어떻게 유지할지 설정

div {
    animation-fill-mode : none; /* 기본값 */
    animation-fill-mode : forwards; /* 종료된후에 마지막 키프레임의 스타일 유지 */
    animation-fill-mode : backwards; /* 시작되기 전에 첫 번째 키프레임의 스타일을 유지 */
}

 

 

 

- animation 단축형 & keyframe 작성

div {
    /* 애니메이션 단축형 */
    animation : 3s ease-in-out 1s infinite reverse forwards paused widthIn;
    /* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    
    
    /* 애니메이션 두개 적용 */
    animation : 2s linear widthIn, 3s ease heightIn
}


/* keyframes 설정 */
@keyframes widthIn {
    fron {
    	width:0%;
    }
    to {
    	width:100%
    }
}

@keyframes heightIn {
    0% {
    	height:0%;
    }
    100% {
    	height:100%
    }
}