آموزش CSS 3 > انیمیشن عناصر در CSS 3 > خاصیت animation-name

خاصیت animation-name :

خاصیت animation-name ، نام انمیشن ( keyfarmes @ ) را تعیین می کند .
از این نام برای دسترسی و فراخوانی انیمیشن در سطح برنامه استفاده می شود .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax animation-name: keyframename | none ;

خاصیت animation-name می تواند دارای یکی از 2 مقدار زیر باشد :

animation-name موارد مختلف خاصیت
توضیح مقدار
این پارامتر نام مورد نظر برای انیمیشن را تعیین می کند . keyframename
این مقدار باعث می شود تا هیچ انیمیشنی اجرا نشود . ( معمولا برای زمانی کاربرد دارد که می خواهید جلوی اجرای یک انمیشن که از یک فایل خارجی CSS می آید ، را بگیرید ) .
این مقدار در صورتی که نامی تعیین نشود ، مقدار پیش فرض است .
none

پشتیانی در مرورگر های مختلف :

   

اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند .

کد لازم برای پشتیانی نوع مرورگر
باید خاصیت را به صورت 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>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟