애니메이션 속기 속성
아래 예제는 6 가지 애니메이션 속성을 사용합니다.
예
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
위와 같은 애니메이션 효과는 속기 animation속성 을 사용하여 얻을 수 있습니다 .
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: example;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* Standard syntax */
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
예
div {
animation: example 5s linear 2s infinite alternate;
}
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
animation: myfirst 5s linear 2s infinite alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 3293 |
기타
W3.CSS 테두리
|
| 3292 | |
| 3291 | |
| 3290 |
기타
W3.CSS 둥근 패널
|
| 3289 | |
| 3288 | |
| 3286 | |
| 3285 | |
| 3284 |
CSS
W3.CSS 패널
|
| 3282 |
기타
W3.CSS 테이블
|
| 3281 |
기타
W3.CSS 경고
|
| 3280 |
기타
W3.CSS 컨테이너
|
| 3279 | |
| 3278 |
기타
SVG <rect>
|
| 3277 |
기타
HTML의 SVG
|
| 3276 | |
| 3275 | |
| 3274 | |
| 3273 |
CSS
반응형 미디어쿼리
|
| 3272 | |
| 3271 |
웹접근성
로그인 자동완성 제외~
|
| 3270 | |
| 3269 | |
| 3268 | |
| 3267 | |
| 3266 | |
| 3265 |
CSS
CSS3 미디어 쿼리
|
| 3263 |
HTML
유튜브 댓글 입력 스타일
|
| 3262 | |
| 3261 |
CSS
플렉스 항목 속성
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기