애니메이션 지연

수다왕

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

· 8년 전 · 조회 1566 1566

애니메이션 지연

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
137	HTML	테이블안에 있는 글 자동 정렬하기 [1]	작은새 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3777
136	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 61-65	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4131
135	HTML	Fedora Core FTP로 설치 [3]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4233
134	HTML	Ajax강의- 첫번째 강의의 pdf중 발표문건 21-30	pearly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4647
133	HTML	전체화면으로 페이지 열기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3271
132	HTML	이번에는 텍스트영역에서 메세지별로 타이핑 시킵니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3131
131	HTML	텍스트 상자에서 메세지가 타이핑 됩니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2806
130	HTML	오늘 날짜와 요일 넣기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3682
129	HTML	창의 사이즈 변경 금지 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2745
128	HTML	손님의 방문 횟수를 알려 줍니다	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3337
127	HTML	자바스크립트 버튼에 링크 걸기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	8591
126	HTML	이름을 물어보고 인사하는 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2539
125	HTML	폼 버튼을 클릭하면 경고 메세지 보내기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3004
124	HTML	포토샵 작업 중에 잘되던 한글 입력이 갑자기 안될때 있으시죠? [5]	두루굳센™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5352
123	HTML	버튼에 스타일주기(익스)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2927
122	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2836
121	HTML	오른쪽마우스클릭시메뉴(익스전용)	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3434
120	HTML	영카트에서 카테고리 검색하기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3197
119	HTML	자바스크립트로 url 획득	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3182
118	HTML	포샾 팁강좌입니다...퍼온 것입니다. [3]	버섯도리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5069
117	HTML	투명도조절 [2]	MCLUB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3646
116	HTML	textarea에 입력된 길이만큼 게이지로 표현	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3505
115	HTML	버튼 하나로 링크두개를 열어보자	유자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3895
114	HTML	[펌]다중 업로드	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3857
113	HTML	포토샵에서 제가 간단하게 쓰는 점선 쓰는 방법입니다 [5]	yunni 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5281
112	HTML	register_globals = on /off 차이점	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3610
111	HTML	밑의 갤러리 압축 화일 [4]	진아맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4089
110	HTML	getElementById와 getElementsByName	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3518
109	HTML	[소개] smtp를 이용하여 mail 보내기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4862
108	HTML	cart클래스2	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2976