CSS animation-play-state Chỉ định cho hành ảnh động chạy hoặc bị tạm dừng

animation-play-state ₃

---

Chỉ định cho hành ảnh động chạy hoặc bị tạm dừng

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-play-state	paused	animation-play-state: paused;	dừng lại.
	running	animation-play-state: running;	chạy tiếp.

Xem ví dụ

<!-- phần javascript và 2 nút button chỉ để thêm tính năng tùy chọn chạy/dừng
không liên quan đến ví dụ css này, bỏ phần màu này đi cũng được -->

<script type="text/javascript">
function run(){
idAmination = document.getElementById('animate');
idAmination.style.webkitAnimationPlayState='running';
idAmination.style.MozAnimationPlayState='running';
idAmination.style.OAnimationPlayState='running';
}

function pause(){
idAmination = document.getElementById('animate');
idAmination.style.webkitAnimationPlayState='paused';
idAmination.style.MozAnimationPlayState='paused';
idAmination.style.OAnimationPlayState='paused';
}
</script>

<style>
#animate {
border: 1px solid #6AA961;
border-radius:50%;
text-align: center;
width: 200px;
height:50px;
position: relative;
animation: myAnimation 5s ease 3s infinite;
-moz-animation: myAnimation 5s ease 3s infinite;
-webkit-animation: myAnimation 5s ease 3s infinite;
-o-animation: myAnimation 5s ease 3s infinite;
}

@keyframes myAnimation {
from {left: 100px;}
to {left: 400px;}
}

/* Hien thi cho Firefox */
@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes myAnimation {
from {left: 100px;}
to {left: 400px;}
}

/* Hien thi cho Opera */
@-o-keyframes myAnimation {
from {left: 100px;}
to {left: 400px;}
}

</style>

<div id="animate">Bendoi.vn <br/>
<a href="javascript:;" onclick="pause()">Paused</a> |
<a href="javascript:;" onclick="run()">Running</a>
</div>

Bendoi.vn

Sự tương thích ( Cập nhật / Báo lỗi )

10	5	12	20	5.1	x	5				3.2	2.1	8

---