애니메이션 지연

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1557 1557

애니메이션 지연

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

</body>

</html>

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
917	CSS	Word Spacing 단어 간격	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1895
916	CSS	Text Direction 텍스트 방향	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1986
915	CSS	Line Height 라인 높이	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2000
914	CSS	Letter Spacing 글자 간격 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2916
913	CSS	Text Indentation 텍스트 들여 쓰기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1947
912	CSS	텍스트 변환 Text Transformation	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2011
911	CSS	텍스트 방향 Text Direction	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1983
910	CSS	라인 높이 Line Height	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1855
909	HTML	글자 간격 Letter Spacing	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2284
908	CSS	text-indent	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2216
907	CSS	text-transform	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2048
906	CSS	text-decoration	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2305
905	CSS	Text Alignment	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2042
904	CSS	Text Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1827
903	CSS	Outline - Shorthand property	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1956
902	CSS	Outline Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2178
901	CSS	Outline Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2055
900	CSS	CSS Outline	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2490
899	CSS	CSS Box Model	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2469
898	CSS	Setting max-width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2043
897	CSS	CSS Height and Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1667
896	CSS	CSS Padding	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2315
895	CSS	CSS Margins	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1995
894	CSS	CSS Border Properties	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2613
893	CSS	CSS Syntax and Selectors	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1977
892	HTML	The HTML <audio> Element	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2056
891	HTML	HTML <video> 요소 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2524
890	HTML	html google map	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2616
889	HTML	SVG와 캔버스의 차이점	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3718
888	HTML	SVG Logo	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2156