CSS3 애니메이션 속도 제어
1. 정의
- transition : css속성을 변경할 때 애니메이션 속도를 지정한다.
- transition을 사용하지 않을 경우 순간적으로 변화가 일어나지만, 속도를 지정하면 부드러운 화면 변화가 생긴다
2. 구현
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> <!-- #box{ border-style:solid; border-width: 1px;; height: 200px; width: 200px; background-color: brown; transition:width 2s, height 2s, background-color 2s; } #box:hover{ width:400px; height:400px; background-color: blue; } --> </style></head><div id="box"></div>
- #box:hover 속성은 마우스가 박스위에 올라 갔을 때 이벤트를 말한다
- transition을 2s으로 조정하여 2초의 시간 동안 변화가 일어남
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS] Inline vs Block vs Inline-block 속성 (0) | 2016.12.11 |
|---|---|
| [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 |
리딩리드