CSS3를 이용한 애니메이션 효과
1. 정의
- animation : 애니메이션의 속성 또는 상태를 정의
- @keyframes : 애니메이션의 움직임을 만드는 중간 상태정의
2. 속성
1) animation 하위 속성
하위 속성 |
설명 |
animation-delay |
엘리먼트가 로드되고 난 후, 언제 애니메이션이 시작될 것인지 지정 |
animation-direction |
애니메이션이 종료되고 다시 처음부터 시작할 것인지, 역방향으로 진행할 것인지 지정 |
animation-duration |
한 사이클의 애니메이션이 얼마에 걸쳐 일어날 것인지를 지정 |
animation-iteration-count |
애니메이션이 몇 번 반복될 것인지 지정, infinite로 지정하면 무한 반복 |
animation-name |
이 애니메이션의 중간 상태를 지정, 중간 상태는 @keyframes 규칙을 이용하여 기술 |
animation-play-state |
애니메이션을 멈추거나 다시 시작 |
animation-timing-function |
중간 상태들의 전환을 어떤 시간 간격으로 진행할 것인지 지정 |
animation-fill-mode |
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될 것인지를 지정 |
2) @keyframes
- 2개 이상의 중간 상태를 정의, 각각의 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일 것인지 나타낸다
- percentage : 중간 상태가 전체 애니메이션에서 언제 등장할 것인지 지정, 0%(from)는 시작점, 100%(to) 끝나는 점
3. 간단한 예제
- 크롬과 Explore에서 동작 하도록 지정한다
- 왼쪽에서 오른쪽으로 텍스트 박스가 이동한다
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS3] CSS3 사용자 인터페이스 (0) | 2016.12.11 |
|---|---|
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
| [CSS3] 접두어(-webkit, -moz-, -ms-) (0) | 2016.12.11 |
| [CSS] 스타일 시트 적용방법 (0) | 2016.12.03 |
| [HTML5] <a> 태그를 이용하여 원하는 위치로 이동 (0) | 2016.11.28 |
리딩리드