آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت animation-name
خاصیت animation-name :
خاصیت animation-name ، نام انمیشن ( keyfarmes @ ) را
تعیین می کند .
از این نام برای دسترسی و فراخوانی انیمیشن در سطح برنامه استفاده می شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
animation-name: keyframename | none ;
|
خاصیت animation-name می تواند دارای یکی از 2 مقدار زیر باشد :
|
توضیح
|
|
این پارامتر نام مورد نظر برای انیمیشن را تعیین می کند .
|
این مقدار باعث می شود تا هیچ انیمیشنی اجرا نشود . ( معمولا برای زمانی کاربرد دارد
که می خواهید جلوی اجرای یک انمیشن که از یک فایل خارجی CSS می آید ، را بگیرید ) .
این مقدار در صورتی که نامی تعیین نشود ، مقدار پیش فرض است .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند
.
|
باید خاصیت را به صورت moz-animation-name- بنویسید .
|
|
پشتیانی عادی .
|
|
پشتیانی نمی شود .
|
|
باید خاصیت را به صورت webkit-animation-name- بنویسید .
|
مثال :
در مثال زیر یک انمیشن را با نام chColor و برای سازگاری با انواع مرورگرها ایجاد کرده
ایم :
< html >;
< head >
< style >
@keyframes chColor
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes chColor /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes chColor /* Chrome */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: chColor
3s;
-moz-animation: chColor
3s; /* Firefox */
-webkit-animation: chColor
3s ; /* Chrome */
}
< /style >
</head>
<body>
< div >
Developer Studio Network
< /div >
</body>
</html>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :