آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت animation-duration
خاصیت animation-duration :
خاصیت animation-duration ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را
بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
برای مثال فرض کنید می خواهید چرخش یک عنصر به دور خود در 2 ثانیه صورت بگیرد .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
animation-duration: time ;
|
|
توضیح
|
این خاصیت ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را بر حسب میلی ثانیه
( ms ) یا ثانیه ( s ) تعیین می کند .
مقدار پیش فرض این خاصیت 0 صفر بوده و به این معنا است که انمیشن اجرا نمی شود .
بنابراین همواره آن ررا مقدار دهی کنید .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند
.
|
باید خاصیت را به صورت moz-animation-duration- بنویسید .
|
|
پشتیانی عادی .
|
|
پشتیانی نمی شود .
|
|
باید خاصیت را به صورت webkit-animation-duration- بنویسید .
|
مثال :
در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده
ایم . مدت زمان اجرای این انمیشن 2 ثانیه تعیین شده است :
< html >;
< head >
< style >
div
{
width:100px;
height:100px;
background:red;
position:relative;
/* W3C and Opera */
animation:mymove infinite;
animation-duration:2s;
/* Firefox */
-moz-animation:mymove
infinite;
-moz-animation-duration:2s;
/* Safari and Chrome */
-webkit-animation:mymove
infinite;
-webkit-animation-duration:2s;
}
@keyframes mymove /* W3C and Opera
*/
{
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;}
}
< /style >
</head>
<body>
< div >
Developer Studio Network
< /div >
</body>
</html>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :