● transition-delay 속성
transition-delay 속성은 마우스를 올리거나 클릭을 하는 이벤트 후 몇 초 후에 애니메이션이 작동할지 지정하는 속성입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 변형 속성</title>
<style>
#graph {
width: 610px;
border: 3px solid black;
}
.space {
width: 10px; height: 50px;
background-color: orange;
margin: 5px;
background-color: orange;
transition-duration: 5s;
}
.space:nth-child(1) {
transition-delay: 0s;
}
.space:nth-child(2) {
transition-delay: 1s;
}
.space:nth-child(3) {
transition-delay: 2s;
}
.space:nth-child(4) {
transition-delay: 3s;
}
.space:nth-child(5) {
transition-delay: 4s;
}
#graph:hover > .space:nth-child(1) {
background-color: red;
width: 100px;
}
#graph:hover > .space:nth-child(2) {
background-color: blue;
width: 300px;
}
#graph:hover > .space:nth-child(3) {
background-color: green;
width: 400px;
마우스를 올려놓으면 차례대로 애니메이션이 실행됩니다. 주의깊게 보시면 애니메이션의 속도가 느렸다가 빠른 속도로 진행되는 것을 알 수 있습니다. 이는 수치 변형 함수의 기본이 ease로 되어있기 때문입니다. 이를 바꾸고 싶으면 transition-timing-function 속성을 사용합니다.
● transiton-timing-function 속성
.space:nth-child(1) {
transition-delay: 0s;
transition-timing-function: linear;
}
.space:nth-child(2) {
transition-delay: 1s;
transition-timing-function: ease;
}
.space:nth-child(3) {
transition-delay: 2s;
transition-timing-function: ease-in;
}
.space:nth-child(4) {
transition-delay: 3s;
transition-timing-function: ease-in-out;
}
.space:nth-child(5) {
transition-delay: 4s;
transition-timing-function: ease-out;
}
기존의 스타일 코드에 transition-timing-function 속성을 적용하였습니다. 코드를 실행하면 각기 다른 수치로 애니메이션이 진행됩니다.
수치변형 함수에 대해 더 알고싶거나 마음에 드는 형태를 직접 만들고 싶다면 cubic-bezier()함수를 참고하세요.
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| CSS3 변형 속성 transition-duration (0) | 2016.11.03 |
|---|---|
| HTML5 입력양식 태그 (0) | 2016.11.03 |
| HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인 (0) | 2016.11.03 |
| HTML5 비디오 요소 (0) | 2016.10.12 |
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
