애니메이션 지연

· 8년 전 · 1712

애니메이션 지연


이 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,267
CSS 8년 전 조회 2,668
CSS 8년 전 조회 2,189
CSS 8년 전 조회 2,123
CSS 8년 전 조회 1,995
CSS 8년 전 조회 2,273
CSS 8년 전 조회 2,033
CSS 8년 전 조회 2,181
CSS 8년 전 조회 2,550
CSS 8년 전 조회 1,890
CSS 8년 전 조회 2,494
CSS 8년 전 조회 1,932
CSS 8년 전 조회 1,716
CSS 8년 전 조회 1,418
CSS 8년 전 조회 1,713
CSS 8년 전 조회 2,505
CSS 8년 전 조회 2,188
CSS 8년 전 조회 1,853
CSS 8년 전 조회 1,885
CSS 8년 전 조회 1,669
CSS 8년 전 조회 1,990
CSS 8년 전 조회 2,426
CSS 8년 전 조회 2,043
CSS 8년 전 조회 1,318
CSS 8년 전 조회 1,567
CSS 8년 전 조회 1,559
CSS 8년 전 조회 1,705
CSS 8년 전 조회 2,012
CSS 8년 전 조회 2,342
CSS 8년 전 조회 1,977