WEBSTORYBOY

Animation

animation 속성은 여러 애니메이션 관련 속성을 한 번에 설정할 수 있는 단축형 속성입니다. 이를 사용하면 백그라운드 이미지의 위치, 사이즈, 반복여부, 방향, 고정, 색 등을 간편하게 지정할 수 있습니다.

속성

• animation-name : 애니메이션 keyframe 이름을 설정합니다.
• animation-duration : 애니메이션 움직임 시간을 설정합니다.
• animation-timing-function : 애니메이션 움직임 속도를 정의합니다.
• animation-delay : 애니메이션이 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
• animation-iteration-count : 애니메이션 반복 횟수 설정합니다.
• animation-direction : 애니메이션 움직임 방향을 설정합니다.
• animation-fill-mode : 애니메이션이 끝난 후의 상태를 설정합니다.
• animation-play-state : 애니메이션 진행상태를 설정합니다.

문법

background : image | position | size | repeat | origin | clip | attachment | color

/* @keyframes name | duration */
animation: move 3s;

/* name | duration | delay */
animation: move 3s 1s;

/* name | duration | delay | iteration-count */
animation: move 3s 1s 5;

/* name | duration | delay | iteration-count | direction*/
animation: move 3s 1s 5 reverse;

예제 1

animation: move 2s; animation: move 2s 1s; animation: move 2s 1s 3;

예제 2

animation-delay: 0s animation-delay: 0.1s animation-delay: 0.2s