애니메이션 지연

· 8년 전 · 1787

애니메이션 지연


이 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,324
CSS 8년 전 조회 2,725
CSS 8년 전 조회 2,255
CSS 8년 전 조회 2,191
CSS 8년 전 조회 2,065
CSS 8년 전 조회 2,338
CSS 8년 전 조회 2,097
CSS 8년 전 조회 2,237
CSS 8년 전 조회 2,633
CSS 8년 전 조회 1,952
CSS 8년 전 조회 2,564
CSS 8년 전 조회 1,983
CSS 8년 전 조회 1,770
CSS 8년 전 조회 1,461
CSS 8년 전 조회 1,788
CSS 8년 전 조회 2,558
CSS 8년 전 조회 2,228
CSS 8년 전 조회 1,918
CSS 8년 전 조회 1,952
CSS 8년 전 조회 1,724
CSS 8년 전 조회 2,046
CSS 8년 전 조회 2,470
CSS 8년 전 조회 2,088
CSS 8년 전 조회 1,385
CSS 8년 전 조회 1,614
CSS 8년 전 조회 1,634
CSS 8년 전 조회 1,777
CSS 8년 전 조회 2,075
CSS 8년 전 조회 2,395
CSS 8년 전 조회 2,034