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

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

خاصیت animation-delay :

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

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

Syntax animation-delay: time ;

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

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

   

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

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

مثال :

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

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

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

نظر شما :  

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