آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت animation-play-state
خاصیت animation-play-state :
خاصیت animation-play-state ، وضعیت نمایش یا توقف نمایش یک انمیشن را تعیین می کند
.
شما می توانید به وسیله جاوا اسکریپت کاری کنید تا انمیشن در میانه اجرای آن متوقف
شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
animation-play-state : paused | running ;
|
این خاصیت دو مقدار مختلف می تواند داشته باشد ، در جدول زیر به بررسی آنها پرداخته
شده است :
|
توضیح
|
در این حالت اجرای نمایش متوقف می شود .
|
در این حالت انیمیشن نمایش داده می شود .
این مقدار ، مقدار پیش فرض است .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند
.
|
باید خاصیت را به صورت moz-animation-play-state بنویسید .
|
|
پشتیانی عادی .
|
|
پشتیانی نمی شود .
|
|
باید خاصیت را به صورت webkit-animation-play-state- بنویسید .
|
مثال عملی :
در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد
کرده ایم . دو دکمه بر روی صفحه قرار داده شده ، با یک دکمه می توانید نمایش را
اجرا کرده و با دکمه دیگر اجرای آن را متوقف نمایید :
< 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>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :