애니메이션을 몇 번 실행해야하는지 설정

수다왕

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

· 8년 전 · 조회 1231 1231

이 animation-iteration-count속성은 애니메이션을 실행해야하는 횟수를 지정합니다.

다음 예제는 정지되기 전에 애니메이션을 세 번 실행합니다.

예

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

}

[전체소스]

<!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-iteration-count: 3; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

}

/* 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>

다음 예제에서는 "infinite"값을 사용하여 애니메이션을 영원히 계속 만듭니다.

예

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

}

[전체소스]

<!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-iteration-count: infinite; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

}

/* 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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
107	HTML	cart클래스1	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3333
106	HTML	비교 복사 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3215
105	HTML	싸이월드 둥근 테두리 만드는 방법 [2]	그레이스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4944
104	HTML	페인트 브러시 툴(Paintbrush Tool, 단축키 - B)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6286
103	HTML	올가미 툴(Lasso Tool, 단축키 - L)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5263
102	HTML	포토샵 레이어의 이해 [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4621
101	HTML	점선 그리는 법... [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3435
100	HTML	일러스트 단축키2	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6186
99	HTML	스타일 시트로 마우스 오버와 아웃시 바뀌는 색깔	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5018
98	HTML	XP서비스팩2 무시하고 새창 띄우기	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3441
97	HTML	개행문자 없애기[펌] [1]	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4437
96	HTML	우체국- 해외발송 구역 및 나라구분 (우편번호와 비슷)	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6874
95	HTML	이미지(img)를 이용한 백그라운드 통신	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4331
94	HTML	[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3215
93	HTML	웹 폰트 적용 시키기 - 초보자용 -	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5755
92	HTML	페이지 자동 이동 방법 3가지!!!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4148
91	HTML	body옆의 스크롤바흔적없애기 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5176
90	HTML	마우스 오른쪽 버튼 사용금지	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3236
89	HTML	마우스 룰오버시 여러가지 효과내기	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3159
88	HTML	포토샾 팁 72가지 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3625
87	HTML	업로드시 중복 파일명 체크및 새로운 이름 생성 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5161
86	HTML	디렉토리 이미지 뷰어 [18]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4807
85	HTML	GD와 GifSicle을 이용한 animationGIF 생성하기 [4]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4137
84	HTML	PHP 한글 메뉴얼[Professional HTML Preprocessor]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3491
83	HTML	register_global=off 일때 파일 업로드 방법	빨간망토의비밀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3147
82	HTML	디렉토리 용량 체크 (윈도우 리눅스 공용) [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4913
81	HTML	password() 의 함수로 암호화한 스크립트를 복호화 할수 없습니다.!! [1]	damoa.biz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4128
80	HTML	insertRow,insertCell,createElement,innerHTML [2]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4447
79	HTML	디렉토리별 용량체크 (Linux server) [3]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3580
78	HTML	[영문] Ajax 사이트 한곳 더 소개 합니다~! [1]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4916