آموزش انیمیشن در CSS3 

erfan molaei
3 سال پیش

آموزش انیمیشن در CSS3 

 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش انیمیشن در CSS3 خواهیم پرداخت.

انیمیشن فرآیند ایجاد تغییر شکل و ایجاد حرکات با عناصر است.

 

keyframes

Keyframes مراحل انیمیشن میانی را در CSS3 کنترل می کند.

 

نمونه Keyframes با انیمیشن سمت چپ

 

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

مثال بالا ارتفاع ، عرض ، رنگ ، نام و مدت زمان انیمیشن را با نحو keyframes نشان می دهد.

انیمیشن در حال حرکت سمت چپ

}
The above example shows height, width, color, name and duration of animation with keyframes syntax.

Moving left animation
Live Demo
<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

 

خروجی به صورت زیر می باشد:

Tutorials Point
this is an example of moving left animation .

Reload page

 

انیمیشن در حال حرکت سمت چپ با keyframes

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            ۷۵% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            ۷۵% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Tutorials Point</h1>
      
      <p>This is an example of animation left with an extra keyframe 
         to make text changes.</p>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

 

خروجی به صورت زیر می باشد:

Tutorials Point
This is an example of animation left with an extra keyframe to make text changes.

Reload page

 

منبع.

لیست جلسات قبل آموزش CSS

  1. آموزش CSS
  2. CSS چیست؟
  3. آموزش نحو CSS
  4. آموزش قوانین CSS 
  5. آموزش واحد انداره گیری در CSS
  6. آموزش رنگ ها در CSS
  7. آموزش Background در CSS
  8. آموزش فونت ها در CSS
  9. آموزش استفاده از تصاویر در CSS 
  10. آموزش استفاده از تصاویر در CSS 
  11. آموزش استفاده از لینک ها در CSS 
  12. آموزش جداول در CSS 
  13. آموزش حاشیه در CSS 
  14. آموزش margin در CSS
  15. آموزش لیست ها در CSS
  16. آمورش ویژگی padding در CSS
  17. آموزش ویژگی مکان نما در CSS 
  18. آموزش outline در CSS 
  19. آموزش ابعاد در CSS 
  20. آموزش نوارهای پیمایشی در CSS
  21. آموزش visibility در CSS
  22.  آموزش موقعیت یابی در  CSS 
  23. آموزش لایه ها در CSS 
  24. آموزش شبه کلاس ها در CSS 
  25. آموزش شبه عناصر در CSS
  26.  آموزش قوانین @ در CSS 
  27. آموزش فیلترهای متنی و تصویری در CSS 
  28. آموزش انواع رسانه ها در CSS 
  29. آموزش مدیا صفحه در CSS
  30. آموزش رسانه شنیداری در CSS
  31. آموزش چاپ در CSS 
  32. آموزش طرح بندی در CSS 
  33. آموزش CSS3
  34. آموزش گرد کردن گوشه ها در CSS3 
  35. آموزش حاشیه تصویر CSS3 
  36. آموزش تنظیم چند پس زمینه در CSS3  
  37. رنگ ها در CSS3 
  38. آموزش گرادیان در CSS3
  39.  آموزش سایه در CSS3 
  40.  آموزش تکست در CSS3
  41. آموزش فونت های وب در CSS3 
  42. آموزش تبدیل ۲d در CSS3 
  43. آموزش تبدیل سه بعدی در CSS3
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه