CSS animation-direction Chỉ định có không chuyển động ngược lại trên các chu kỳ đi trước

animation-direction ₃

---

Specifies whether or not the animation should play in reverse on alternate cycles
Chỉ định có / không chuyển động ngược lại trên các chu kỳ đi trước.

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-direction	normal	animation-direction: normal;	Chuyển động bình thường, đây là dạng mặc định.
	alternate	animation-direction: alternate;	Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.

Xem ví dụ

<style>
#animation-direction
{
width:100px;
height:100px;
background:red;
border-radius:50%;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Firefox */
-moz-animation:myfirst 5s infinite;
-moz-animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
/* Opera */
-o-animation:myfirst 5s infinite;
-o-animation-direction:alternate;
}
/* nếu làm kỹ, bạn có thể tạo đường đường chuyển động tròn hoặc bất kỳ hình gì bạn muốn.*/
@keyframes myfirst
{
0% {background:red; left:200px; top:-200px;}
25% {background:yellow; left:400px; top:-200px;}
50% {background:blue; left:400px; top:0px;}
75% {background:green; left:200px; top:0px;}
100% {background:red; left:200px; top:-200px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:200px; top:-200px;}
25% {background:yellow; left:400px; top:-200px;}
50% {background:blue; left:400px; top:0px;}
75% {background:green; left:200px; top:0px;}
100% {background:red; left:200px; top:-200px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:200px; top:-200px;}
25% {background:yellow; left:400px; top:-200px;}
50% {background:blue; left:400px; top:0px;}
75% {background:green; left:200px; top:0px;}
100% {background:red; left:200px; top:-200px;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:200px; top:-200px;}
25% {background:yellow; left:400px; top:-200px;}
50% {background:blue; left:400px; top:0px;}
75% {background:green; left:200px; top:0px;}
100% {background:red; left:200px; top:-200px;}
}
</style>

<div id="animation-direction">bendoi.vn</div>

bendoi.vn

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

x

5

---