애니메이션을 반대 방향 또는 대체 주기로 실행하십시오.

수다왕

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

· 8년 전 · 조회 1557 1557

이 animation-direction속성은 애니메이션을 역방향 또는 대체 사이클로 실행시키는 데 사용됩니다.

다음 예제에서는 역방향으로 애니메이션을 실행합니다.

예

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: reverse;

}

[전체소스]

Run »Result Size: 555 x 785

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

-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: reverse;

}

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

다음 예제에서는 "alternate"값을 사용하여 애니메이션을 먼저 앞으로 이동 한 다음 뒤로 이동 한 다음 앞으로 이동합니다.

예

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: alternate;

}

[전체소스]

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

-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: alternate;

}

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
47	HTML	HTML에 얹히지 않은 이미지팝업(화면 중앙으로) [1]	醉生夢死™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4543
46	HTML	사진을 액자에 넣기(액자 만들기) [3]	Photofly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5406
45	HTML	초간단 스크롤 [1]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3296
44	HTML	잘되는 센드메일 수신이 안될때...	꿈꾸는비행기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4378
43	HTML	글자를 쓰고나서 . . . 다른 글자 수정시 [2]	막시무스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3792
42	HTML	textarea 에 Tab기능 넣기	醉生夢死™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3769
41	HTML	자바스크립트 오류 메시지 감추기	태엽푸는새 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4268
40	HTML	붙여넣기 + 오른쪽 마우스 클릭 금지(익스만)	세은아빠2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3932
39	HTML	삼바 설정 간단 쉬운 쉽게	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4283
38	HTML	디지털 카메라로 찍은 이미지 밝게하기(설명은 포토샵 CS2 버젼용입니다) [4]	bbking	20년 전	6042
37	HTML	특수문자 모음 [5]	yesmoa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	6720
36	HTML	mqueue 설정(센드메일속도 UP)	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	3828
35	HTML	IE - 스크롤바 색상의 정확한 적용 [2]	이근우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	5033
34	HTML	HTML Utopia:Designing Without Tables Using CSS [1]	바세린 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	4506
33	HTML	패스선택툴 [1]	정호아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	3737
32	HTML	작업내역 브러쉬 [1]	정호아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	3827
31	HTML	닷지툴 [5]	정호아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	4582
30	HTML	일러스트 메뉴얼. [3]	bbking	20년 전	6664
29	HTML	첫 게시물..^^ 포토샵 단축키 [10]	bbking	20년 전	8600
28	HTML	아파치 (apache) 인증 만들기 htaccess	This 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	7231
27	HTML	vsftp에서 기본디렉토리 바꾸기 (ftp)	This 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	4087
26	HTML	콘솔의 화면보호기능을 끄려면?	This 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2568
25	HTML	스왑 사용 안하기	This 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	3075
24	HTML	document.all("Object명") vs document.getElementsByName("Object명") [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	6833
23	HTML	문자열 연결 CONCAT()	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4902
22	HTML	다중 파일들을 하나의 db필드 및 프로그램으로 제어하기 [1]	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4840
21	HTML	디렉토리 관련함수 [퍼옮]	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	3694
20	HTML	setcookie	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4830
19	HTML	eregi() vs ereg() [2]	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4721
18	HTML	man 페이지 txt파일로 저장하기	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	3560