코드랩 레퍼런스
animation-fill-mode 본문
animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다
| 특징 | 설명 |
|---|---|
| 기본 값 | none |
| 상속 | 안됨 |
| 애니메이션 | 안됨 |
| 버전 | CSS3 |
Definition
- animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다
Syntax
animation-fill-mode: none | forwards | backwards | both | inherit;
Property
| 속성 값 | 설명 |
|---|---|
| none | 애니메이션이 끝난 후 상태를 설정하지 않습니다. |
| forwards | 애니메이션이 끝난 후 그 지점에 그대로 있습니다. |
| backwards | 애니메이션이 끝난 후 시작점으로 돌아옵니다. |
| both | 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다. |
| inherit | 애니메이션의 상태를 상위 요소한테 상속받습니다. |
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 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