애니메이션 지연

· 8년 전 · 1735

애니메이션 지연


이 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,269
CSS 8년 전 조회 2,669
CSS 8년 전 조회 2,204
CSS 8년 전 조회 2,138
CSS 8년 전 조회 1,997
CSS 8년 전 조회 2,285
CSS 8년 전 조회 2,042
CSS 8년 전 조회 2,185
CSS 8년 전 조회 2,562
CSS 8년 전 조회 1,901
CSS 8년 전 조회 2,501
CSS 8년 전 조회 1,937
CSS 8년 전 조회 1,722
CSS 8년 전 조회 1,422
CSS 8년 전 조회 1,736
CSS 8년 전 조회 2,514
CSS 8년 전 조회 2,193
CSS 8년 전 조회 1,858
CSS 8년 전 조회 1,898
CSS 8년 전 조회 1,676
CSS 8년 전 조회 1,994
CSS 8년 전 조회 2,430
CSS 8년 전 조회 2,049
CSS 8년 전 조회 1,334
CSS 8년 전 조회 1,572
CSS 8년 전 조회 1,568
CSS 8년 전 조회 1,717
CSS 8년 전 조회 2,026
CSS 8년 전 조회 2,345
CSS 8년 전 조회 1,979