آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

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

خاصیت animation-iteration-count :

خاصیت animation-iteration-count ، تعیین می کند که انیمیشن مورد نظر چند بار اجرا شود .
مقدار پیش فرض یک است ، انیمیشن فقط یکبار اجرا می شود . اما می توان مقدار آن را افزایش داد . 

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

Syntax animation-iteration-count : value  |  infinite ;
این خاصیت دو مقدار مختلف می تواند داشته باشد ، در جدول زیر به بررسی آنها پرداخته شده است :
animation-iteration-count   مقادیر مختلف خاصیت   
توضیح مقدار
یک مقدار عددی است که تعیین می کند انیمیشن جند بار اجرا شود .
مقدار پیش فرض این خاصیت یک بوده و به این معنا است که انمیشن یکبار  اجرا می شود .
value
تعیین می کند که انیمیشن به صورت مداوم و بی نهایت اجرا شود . infinite

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

   

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

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

مثال شماره 1 : تکرار انمیشن به دفعات تعیین شده .

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

< html >
  < head >
    < style >
       div
           {
                width:100px;
                height:100px;
                background:red;
                position:relative;
               /* W3C and Opera */
                animation:mymove;
                animation-duration:3s;
                animation-iteration-count: 2;

               /* Firefox */
              -moz-animation:mymove;
              -moz-animation-duration:3s;
              -moz-animation-iteration-count:2;
               /* Safari and Chrome */
              -webkit-animation:mymove;
              -webkit-animation-duration: 3s;
              -webkit-animation-iteration-count:2 ;
            }

         @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>
کد
خروجی

مثال شماره 2 : تکرار انمیشن به صورت بی نهایت و تا زمان بستن صفحه ! .

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

< html >
  < head >
    < style >
       div
           {
                width:100px;
                height:100px;
                background:red;
                position:relative;
               /* W3C and Opera */
                animation:mymove;
                animation-duration:3s;
                animation-iteration-count: infinite;

               /* Firefox */
              -moz-animation:mymove;
              -moz-animation-duration:3s;
              -moz-animation-iteration-count:infinite;
               /* Safari and Chrome */
              -webkit-animation:mymove;
              -webkit-animation-duration: 3s;
              -webkit-animation-iteration-count:infinite;
            }

         @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 :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟