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