15.animation
1. 개요
특정 요소에 애니메이트 효과를 적용할수 있다. 애니메이션 세부 속성을 지정한 @keyfames를 이용해 키프레임에서 변하는 속성값을 설정해서 애니메이션을 추가한다.
2. 기본문법
animation: <property> <duration> <timing-function> <delay>;
예시: animation: rotateBox 3s infinite ease;
3. 속성
3.1. animation()
| 속성 명 | 초기값 | 설명 |
|---|---|---|
| animation-name | none | 애니메이션 이름 |
| animation-duration | Os | 지속 시간(s, ms 단위 사용) |
| animation-timing-function | ease | 속도변화 지정 |
| animation-delay | Os | 시작 전 지연 시간 지정 |
| animation-iteration-count | 1 | 반복 여부(숫자, infinite) |
| animation-direction | normal | 방향(normal, reverse, alternate, alternate-reverse) |
| animation-fill-mode | none | 실행 전과 후에 대상에 스타일을 적용방법(forwards,backwards,both) |
| animation-play-state | running | 실행 여부 (paused, running) |
3.2. @keyframes
- 형식
- 예문
@keyframes [animation-name] {@keyframes rotateBox {
@keyframes [animation-name] {from { 속성 : 속성 값; }50% {속성 속성 값; }to { 속성: 속성 값; }}
@keyframes rotateBox { from { transform: rotate(Odeg); } 50% { ransform: rotate(180deg); } to { transform: rotate(360deg); }}