코드랩 레퍼런스

animation-fill-mode 본문

CSS

animation-fill-mode

webstoryboy 2016. 9. 27. 19:08

animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다
특징 설명
기본 값 none
상속 안됨
애니메이션 안됨
버전 CSS3

Definition

  • animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다

Syntax

animation-fill-mode: none | forwards | backwards | both | inherit;

Property

속성 값 설명
none 애니메이션이 끝난 후 상태를 설정하지 않습니다.
forwards 애니메이션이 끝난 후 그 지점에 그대로 있습니다.
backwards 애니메이션이 끝난 후 시작점으로 돌아옵니다.
both 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.
inherit 애니메이션의 상태를 상위 요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
animation-fill-mode

Sample1 클릭하면 이미지가 끝난 후의 상태를 확인하는 예제입니다.

애니메이션(Animation-fill-mode)

mode
mode
mode
mode
Click : 클릭하면 이미지가 움직입니다.

  • .list div.mode1 {animation: move1 2s 1 ease; animation-fill-mode : none;}
  • .list div.mode2 {animation: move1 2s 1 ease; animation-fill-mode : forwards;}
  • .list div.mode3 {animation: move1 2s 1 ease; animation-fill-mode : backwards;}
  • .list div.mode4 {animation: move1 2s 1 ease; animation-fill-mode : both;}
<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			.list > div {width: 60px; height: 60px; background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); line-height: 60px; text-align: center; border-radius: 50%;font-size: 12px; color: #fff; margin: 10px; position: relative;}
			.list div.mode1 {animation: move3 2s 1 ease; animation-fill-mode : none;}
			.list div.mode2 {animation: move3 2s 1 ease; animation-fill-mode : forwards;}
			.list div.mode3 {animation: move3 2s 1 ease; animation-fill-mode : backwards;}
			.list div.mode4 {animation: move3 2s 1 ease; animation-fill-mode : both;}

			@keyframes move3 {
				0% {left: 0%;}
				100% {left: calc(100% - 70px);}
			}
		</style>
	</head>
	<body>
		
		<h3 class="h3">애니메이션(Animation-fill-mode)</h3>
		<div class="list">
			<div>mode</div>
			<div>mode</div>
			<div>mode</div>
			<div>mode</div>
		</div>

		<div class="btn">
			<a href="#c" class="line">Click : 클릭하면 이미지가 움직입니다.</a><br><br>
			<ul>
				<li>.list div.mode1 {animation: move1 2s 1 ease; animation-fill-mode : none;}</li>
				<li>.list div.mode2 {animation: move1 2s 1 ease; animation-fill-mode : forwards;}</li>
				<li>.list div.mode3 {animation: move1 2s 1 ease; animation-fill-mode : backwards;}</li>
				<li>.list div.mode4 {animation: move1 2s 1 ease; animation-fill-mode : both;}</li>
			</ul>
		</div>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(".btn a").click(function(){
				$(".list > div").eq(0).addClass("mode1");
				$(".list > div").eq(1).addClass("mode2");
				$(".list > div").eq(2).addClass("mode3");
				$(".list > div").eq(3).addClass("mode4");
			});
		</script>
	</body>
</html>  


Share

Ad

Comments