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

خاصیت animation-duration :

خاصیت animation-duration ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
برای مثال فرض کنید می خواهید چرخش یک عنصر به دور خود در 2 ثانیه صورت بگیرد .

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

Syntax animation-duration: time ;

syntax توضیح موارد
توضیح مقدار
این خاصیت ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
مقدار پیش فرض این خاصیت 0 صفر بوده و به این معنا است که انمیشن اجرا نمی شود .
بنابراین همواره آن ررا مقدار دهی کنید .
time

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

   

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

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


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


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

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

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