애니메이션 지연

· 8년 전 · 1603

애니메이션 지연


이 animation-delay속성은 애니메이션의 시작에 대한 지연을 지정합니다.


다음 예제는 애니메이션을 시작하기 전에 2 초의 지연이 있습니다.


div {

    width: 100px;

    height: 100px;

    position: relative;

    background-color: red;

    animation-name: example;

    animation-duration: 4s;

    animation-delay: 2s;

}



<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background-color: red;

    position: relative;

    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */

    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */

    animation-name: example;

    animation-duration: 4s;

    animation-delay: 2s;

}


/* 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>


|
댓글을 작성하시려면 로그인이 필요합니다. 로그인

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 8년 전 조회 2,129
CSS 8년 전 조회 2,527
CSS 8년 전 조회 2,076
CSS 8년 전 조회 2,005
CSS 8년 전 조회 1,850
CSS 8년 전 조회 2,148
CSS 8년 전 조회 1,912
CSS 8년 전 조회 2,040
CSS 8년 전 조회 2,441
CSS 8년 전 조회 1,772
CSS 8년 전 조회 2,350
CSS 8년 전 조회 1,793
CSS 8년 전 조회 1,578
CSS 8년 전 조회 1,269
CSS 8년 전 조회 1,604
CSS 8년 전 조회 2,368
CSS 8년 전 조회 2,043
CSS 8년 전 조회 1,797
CSS 8년 전 조회 1,761
CSS 8년 전 조회 1,523
CSS 8년 전 조회 1,842
CSS 8년 전 조회 2,282
CSS 8년 전 조회 1,905
CSS 8년 전 조회 1,212
CSS 8년 전 조회 1,416
CSS 8년 전 조회 1,394
CSS 8년 전 조회 1,608
CSS 8년 전 조회 1,898
CSS 8년 전 조회 2,192
CSS 8년 전 조회 1,844
🐛 버그신고