[CSS 강좌] 워드프레스 테마 만들기
animation-duration으로 애니메이션이 시작해서 끝날 때까지의 시간을 정합니다.
•기본값 : 0s
•상속 : No
•애니메이션 : No
•버전 : CSS Level 3
문법
animation-duration: time | initial | inherit
•time : 연기 시키는 시간을 정합니다.
•initial : 기본값으로 설정합니다.
•inherit : 부모 요소의 속성값을 상속받습니다.
시간 단위는 초(second) 또는 1000분의 1초(millisecond)를 사용합니다. 예를 들어 3초는 3s 또는 3000ms입니다.
예제
사각형을 왼쪽에서 오른쪽으로 이동시키는 애니메이션입니다. 첫번째 사각형은 2초, 두번째 사각형은 4초, 세번째 사각형은 6초, 네번째 사각형은 8초의 시간으로 이동합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Reference | animation-duration</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
margin-bottom: 10px;
-webkit-animation-name: jbMove;
animation-name: jbMove;
}
.jbDiv1 {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.jbDiv2 {
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
.jbDiv3 {
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.jbDiv4 {
-webkit-animation-duration: 8s;
animation-duration: 8s;
}
@-webkit-keyframes jbMove {
from {
top: 0px;
left: 0px;
}
to {
top: 0px;
left: 590px;
}
}
@keyframes jbMove {
from {
top: 0px;
left: 0px;
}
to {
top: 0px;
left: 590px;
}
}
</style>
</head>
<body>
<div class="jbDiv1"></div>
<div class="jbDiv2"></div>
<div class="jbDiv3"></div>
<div class="jbDiv4"></div>
</body>
</html>
'홈페이지제작 > CSS' 카테고리의 다른 글
| [HTML과 CSS 코드예시] 스타일 적용으로 웹페이지 꾸미기 (0) | 2018.02.06 |
|---|---|
| CSS 강좌 /선택자 / 전체 선택자(Universal Selector) (0) | 2018.02.05 |
| [CSS 기초강좌] 표(table) 꾸미기 > 테두리 만들기 (0) | 2018.01.11 |
| [CSS 강좌] 표(table) 과 배경색 꾸미기 (0) | 2018.01.10 |
| [CSS 기초강좌 ] 아이디 선택자(ID Selector) (0) | 2018.01.09 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.