[css] animation 속성

animation

모든 애니메이션 속성을 적용한다.

 

animation-delay

애니메니션 발생 후 몇 초 후에 재생할지 지정한다.

 

animation-direction

애니메이션이 순환할 때  진행 방향을 설정한다.

[animation-direction 속성 값]

• normal :  시작 위치에서 다시 시작한다.(정방향) - 기본 값 {시작-> 종료, 시작->종료}
• reverse : 종료 위치에서 다시 시작한다. (역방향){종료->시작,종료->시작}
• alternate : 애니메이션이 종료 위치에 도착하면  종료 시점에서 시작 시점까지 반복한다 (정방향 반복){시작->종료,종료 -> 시작}
• alternate-reverse 애니메이션이 종료 위치에서 시작하며 시작 시점에 도착 하면 시작 시점에서 종료 시점 까지 반복한다. (역방향 반복 ) {종료->시작,시작->종료}

 

animation-duration

애니메이션을 몇 초 동안 재생할지 지정한다.

 

animation-iteration-count

애니메이션 반복 횟수를 지정한다.

[animation-count 속성 값]

• -지정 숫자 : 0 ~ 
• -infinite : 무한 반복

animation-name

애니메이션 이름을 지정한다

[애니메이션 한 줄로 표시할 경우]

duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name 

 

animation-play-state

애니메이션 재생 상태를 지정한다

 

[animation-play-state]

• paused : 일시 정지
• running : 재생 

animation-timing-function

수치 변형 함수를 지정한다

 

animation-fill-mode

애니메이션 실행 전과 후에 대상에 스타일을 지정한다.

[animation-fill-mode]

• none : 애니메이션이 끝난 후 상태를 설정하지 않는다.
• forwards : 애니메이션이 끝난 후 그 지점에 그대로 있는다.
• backwards : 애니메이션이 끝난 후 시작점으로 돌아간다.
• both: 애니메이션의 앞 뒤 결과를 조합하여 설정한다.
• inherit : 애니메이션의 상태를 상위 요소한테 상속받는다.

 

keyframes

특정 시점에  스타일을 지정해서 사용한다.

• 0%~100% - 0%부터 100% 시점에 스타일을 지정해서 사용한다
• from과 to  - 시작과 끝 스타일을 지정해서 사용한다.

 

 

 

 

See the Pen animation by onion (@saetmlda) on CodePen.