آموزش Animation در css

هدایت عباسی آموزش CSS

آموزش ویدئویی دستور Animation

دانلود رایگان فیلم و آموزش ویدئوییAnimation در cssهمراه با چندین مثال

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش Animation در css شامل دستورات و مقادیر مختلف میباشد که با ذکر چندین مثال همه را توضیح می دهیم. کدهای زیر را در فایل html قرار داده و اجرا نمایید تا نتیجه را ببینید. کدها همه تست شده میباشد.

دستور animation

در این بخش از آموزش css از تاپ سایت 98 به سراغ دستور animation می رویم.

از دستور animation در css برای ایجاد انیمیشن استفاده می شود.

با استفاده از keyframes یک انیمیشن را ایجاد می کنیم.

برای استفاده از انیمیشن از animation-name استفاده می کنیم.

با استفاده از animation-duration مدت زمان اجرای انیمیشن را مشخص می کنیم.

با استفاده از CSS Animation می توانیم از یک استایل به استایل دیگر برویم یعنی می توانیم ویژگی یا خاصیت های css عناصر را تغییر دهیم. با ذکر چند مثال متوجه خواهید شد.

اگر بصورت صحیح از animation استفاده کنیم قالب را بسیار زیبا می کند.

مثال دستور animation

در زیر مثال دستور animation را مشاده می کنید.

در این مثال ابتدا با استفاده از keyframes یک انیمیشن را ایجاد می کنیم.

سپس آن را به div هاور نسبت می دهیم.

خروجی مثال تغییر رنگ قرمز به زرد با هاور کردن میباشد.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background-color: red;
}
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div:hover {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>CSS</p>
<div>
<p>CSS Animation</p>
</div>
</body>
</html>

آموزش animation-delay

حال به سراغ آموزش animation-delay میرویم.

از دستور animation-delay برای تاخیر یا delay استفاده میکنیم.

در مثال زیر ابتدا 2 ثانیه تاخیر می کند و سپس دستورات انجام می شوند.

خروجی مثال زیر ابتدا یک تاخیر 2 ثانیه ای و سپس حرکت کردن باکس یا div میباشد.

باکس در جهات مختلف حرکت می کند. قبل از css3 این کارها با جاوااسکریپت و جی کوئری انجام می شد.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>CSS</p>
<div>
<p>CSS Animation</p>
</div>
</body>
</html>

دستور animation-iteration-count

دستور animation-iteration-count برای زمانی استفاده می شود که بخواهیم انیمیشن بیش از یک بار انجام شود.

در مثال زیر با دستور animation-iteration-count دستورات را مجبور می کنیم که دو بار اجرا شوند.

در صورت تمایل می توانید تعداد آن را بیشتر کنید.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 2;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>CSS</p>
<div>
<p>CSS Animation</p>
</div>
</body>
</html>

مقدار infinite

در دستور animation-iteration-count می توانیم بجای عدد مقدار infinite را وارد کنیم.

در این صورت انیمیشن بصورت دائمی اجرا می شود و متوقف نمی شود.

در مثال بالا فقط این مقدار را تغییر دهید و سپس کد را دوباره اجرا کنید تا خروجی را ببینید.

div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}

دستور animation-direction

با استفاده از دستور animation-direction می توانیم روند حرکت انیمیشن را مشخص کنیم.

دستور animation-direction دارای حالات مختلفی هستند که با هم بررسی می کنیم.

مقدار reverse

مقدار reverse اجرای انیمیشن را معکوس می کند.

در مثال زیر نحوه اجرای دستورات را مشاهده خواهید کرد. کد زیر را اجرا کنید تا نتیجه را ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-direction: reverse;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>CSS</p>
<div>
<p>CSS Animation</p>
</div>
</body>
</html>

مقدار alternate

مقدار alternate انیمیشن را یک بار بصورت forwards و بار دوم بصورت backwards اجرا می کند.

یعنی بار اول بصورت معمولی و بار دوم معکوس اجرا می کند.

در مثال بالا این کد را تغییر دهید. حتما از دستور animation-iteration-count استفاده کنید و مقدار آن را بیش از 3 بگذارید تا نتیجه را ببینید ما مقدار آن را 5 قرار داده ایم.

div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 5;
animation-direction: alternate;
}

مقدار alternate-reverse

مقدار alternate-reverse انیمیشن را یک بار حالت عادی و بار دوم بصورت معکوس اجرا می کند.

مثال بالا را با کد زیر تغییر دهید تا نتیجه را ببینید.

همان طور که در خروجی مشاهده میکنید اجرای اول بصورت forwards میباشد و اجرای دوم بصورت معکوس و تا پایان به همین صورت ادامه پیدا می کند.

div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 5;
animation-direction: alternate-reverse;
}

دستور animation-timing-function

دستور animation-timing-function نحوه اجرا و سرعت اجرای انیمیشن را مشخص می کند این دستور دارای مقادیر مختلف میباشد که بررسی خواهیم کرد.

مقدار ease – ابتدا آهسته ، سپس تند ، سپس آهسته اجرا می شود. این حالت پیش فرض است.

مقدار ease-in با سرعت آهسته شروع می شود.

مقدار ease-out با سرعت آهسته پایان می یابد.

مقدار ease-in-out تعیین یک انیمیشن با شروع و پایان آهسته

مقدار cubic-bezier به شما اجازه می دهد که سرعت ها را خودتان مشخص کنید.

مثال بالا را با کد زیر تغییر دهید و نتیجه را ببینید.

برای متد یا دستور animation-timing-function می توانید مقادیر بالا را قرار دهید و تست نمایید.

div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 5;
animation-timing-function: linear;
}

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید