코드랩 레퍼런스
animation-play-state 본문
animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
| 특징 | 설명 |
|---|---|
| 기본 값 | running |
| 상속 | 안됨 |
| 애니메이션 | 안됨 |
| 버전 | CSS3 |
Definition
- animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
Syntax
animation-play-state : paused | running | inherit;
Property
| 속성 값 | 설명 |
|---|---|
| paused | 애니메이션의 움직임을 정지시킵니다. |
| running | 애니메이션을 움직이게 합니다. |
| inherit | 애니메이션 움직임을 상위 요소한테 상속받습니다. |
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| animation-direction |
Sample1 클릭하면 이미지가 움직이는 횟수를 확인하는 예제입니다.
애니메이션(animation-play-state)
play
<!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;}
.btn-line a {border: 1px solid #F06950; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
.list .running {animation: move2 3s 100 ease; animation-play-state:running;}
.list .paused {animation: move2 3s 100 ease; animation-play-state:paused;}
@keyframes move2 {
0% {left: 0; top:0;}
25% {left: calc(100% - 70px); top:0;}
50% {left: calc(100% - 70px); top: calc(100% - 70px);}
75% {left:0; top: calc(100% - 70px);}
100% {left: 0; top:0;}
}
</style>
</head>
<body>
<h3>애니메이션(animation-play-state)</h3>
<div class="list" style="height: 300px">
<div>play</div>
</div>
<div class="btn btn-line">
<a href="#c">running</a>
<a href="#c">paused</a>
<ul>
<li>.list .running {animation: move2 3s 100 ease; animation-play-state:running;}</li>
<li>.list .paused {animation: move2 3s 100 ease; animation-play-state:paused;}</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(){
var text = $(this).text();
$(".list > div").removeClass().addClass(text);
});
</script>
</body>
</html>
Related Articles
more
Ad
Comments