애니메이션 지연

· 2017-08-24 (목) 13:35:51 · 1943

애니메이션 지연


이 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>


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

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 17-09-10 조회 2,018
CSS 17-09-10 조회 2,432
CSS 17-09-09 조회 2,008
CSS 17-09-09 조회 2,258
CSS 17-09-09 조회 2,050
CSS 17-09-07 조회 1,924
CSS 17-09-07 조회 2,293
CSS 17-09-07 조회 1,888
CSS 17-09-06 조회 1,982
CSS 17-09-06 조회 2,084
CSS 17-09-06 조회 2,092
CSS 17-09-02 조회 1,891
CSS 17-09-02 조회 4,588
CSS 17-09-02 조회 2,500
CSS 17-09-01 조회 2,908
CSS 17-09-01 조회 2,439
CSS 17-09-01 조회 2,370
CSS 17-08-31 조회 2,250
CSS 17-08-31 조회 2,534
CSS 17-08-31 조회 2,270
CSS 17-08-29 조회 2,421
CSS 17-08-29 조회 2,801
CSS 17-08-29 조회 2,116
CSS 17-08-25 조회 2,753
CSS 17-08-25 조회 2,176
CSS 17-08-25 조회 1,943
CSS 17-08-24 조회 1,621
CSS 17-08-24 조회 1,944
CSS 17-08-24 조회 2,716
CSS 17-08-23 조회 2,399