CSS animation-duration Xác định thời gian để hoàn thành một chu kỳ

animation-duration ₃

---

Specifies how many seconds or milliseconds an animation takes to complete one cycle
đơn vị thời gian là s hoặc ms, quy đổi 1s=1000ms. Cùng 1 khoảng cách, thời gian càng lớn thì vận tốc chuyển động càng chậm.

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-duration	thời gian (s hoặc ms)	animation-duration: 5s;	Xác định thời gian để hoàn thành một chu kỳ, mặc định là 0s, 0ms. (1s=1000ms).

Xem ví dụ

<style>
#ttt
{
height:100px;
background:#E5EECC;
position:relative;
animation:mymove infinite;
animation-duration:1s;
/* Firefox */
-moz-animation:mymove infinite;
-moz-animation-duration:1s;
/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:1s;
/* Opera */
-o-animation:mymove infinite;
-o-animation-duration:1s;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
<div id="ttt">bendoi.vn</div>

bendoi.vn

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

5

---