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

saber

4 سال پیش

امتیاز دهید post

آموزش انیمیشن در 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 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
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         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%;
            }
         }
      &lt;/style&gt;
   &lt;/head&gt;

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

}

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

Moving left animation

Live Demo

<html>

<head>

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>

function myFunction() {

location.reload();

}

</script>

</body>

</html>

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

Tutorials Point
this is an example of moving left animation .

Reload page

Tutorials Point

this is an example of moving left animation .

Reload page

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         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%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      &lt;/style&gt;
   &lt;/head&gt;

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

<html>

<head>

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%

}

75% {

font-size:300%;

margin-left:25%;

width:150%;

}

to {

margin-left:0%;

width:100%;

}

@-webkit-keyframes slidein {

from {

margin-left:100%;

width:300%

}

75% {

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>

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

Tutorials Point

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

Reload page

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

keyframes

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

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

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

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

دیدگاه شما

بدون دیدگاه

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

keyframes

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

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

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

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه