تبلیغات متنی و بنر

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

خاصیت animation-timing-function :

خاصیت animation-timing-function ، نحوه و سرعت اجرای انیمیشن را در طی فرآیند آن تعیین می کند .
از این خاصیت می توان برای دادن یک جلوه تصویری به انیمیشن استفاده کرد . برای مثال انیمیشن در هنگام اجرا ، آهسته شروع شده و سپس سرعتش تا پایان آن افزایش یابد .

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

Syntax animation-timing-function: value ;

پارامتر value در این خاصیت می تواند یکی از مقادیر زیر را داشته باشد :

value انواع مقادیر پارامتر
توضیح مقدار
در این حالت سرعت اجرای انیمیشن در تمام طول فرآیند آن یکسان است . linear
در این حالت انیمیشن با سرعت کم آغاز شده ، در میانه فرآیند سرعتش زیاد شده و سپس با سرعت کم پایان می یابد .
این مقدار پیش فرض برای پارامتر value است . 		ease
انیمیشن در ابتدا با سرعت کم شروع شده و سپس سرعتش زیاد می شود . ease-in
انیمیشن در ابتدا با سرعت زیاد شروع شده و سپس سرعتش در انتها کم می شود . ease-out
نیمیشن در ابتدا و انتها دارای سرعت کم است . ease-in-out 

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

   

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

کد لازم برای پشتیانی نوع مرورگر
باید خاصیت را به صورت moz-animation-timing-function-  بنویسید .
پشتیانی عادی .
پشتیانی نمی شود .
باید خاصیت را به صورت webkit-animation-timing-function-  بنویسید .

مثال عملی :

در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  10 ثانیه و حالت اجرای آن  ease  تعیین شده است :

< html >;
  < head >
    < style >
       div
           {
                width:100px;
                height:100px;
                background:red;
                position:relative;
               /* W3C and Opera */
                animation:mymove infinite;
               animation-duration:10s;
                animation-timing-function: ease;
               /* Firefox */
              -moz-animation:mymove infinite;
              -moz-animation-duration:10s;
              -moz-animation-timing-function:ease;
               /* Safari and Chrome */
              -webkit-animation:mymove infinite;
              -webkit-animation-duration:10s;
              -webkit-animation-timing-function:ease;
            }

         @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 :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟