آموزش ایجاد انیمیشن در CSS

CSS به ما امکان می دهد که بدون استفاده از جاوا اسکریپت، برای عناصر، انیمیشن ایجاد کنیم.

در این مقاله، ویژگی های زیر را توضیح می دهیم:

• keyframes@
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

انیمیشن های CSS چه هستند؟

یک انیمیشن امکان می دهد تا کدهای CSS به تدریج از یک استایل به یک استایل دیگر تغییر کنند. ما (در انیمیشن) می توانیم هر تعداد ویژگی CSS که بخواهیم، را به تعداد دلخواه تغییر دهیم. برای استفاده از انیمیشن CSS باید تعدادی فریم کلیدی(keyframes) را برای آن مشخص کنیم.  فریم های کلیدی، مشخص می کنند که کدام عنصر، در  چه زمان خاصی، باید یک استایل را داشته باشد.

دستور keyframes@ در CSS

وقتی که استایل های CSS را در درون دستور keyframes@ مشخص می کنیم، این انیمیشن به تدریج در زمان های خاصی، از استایل فعلی به استایل جدید تغییر می کند. برای اینکه یک انیمیشن کار کند، ما باید انیمیشن را به یک عنصر متصل کنیم. در مثال زیر، انیمیشن "example" به عنصر <div> متصل شده است. این انیمیشن به مدت 4 ثانیه ادامه خواهد داشت و به تدریج ویژگی background-color از عنصر <div> را، از قرمز(red) به زرد(yellow) تغییر می دهد.

 /* کدهای انیمیشن */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* عنصری که انیمیشن باید به آن اعمال شود */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

نکته: ویژگی animation-duration مدت زمانی که انیمیشن باید کامل شود را تعریف می کند. اگر ویژگی animation-duration مشص نشود،، انیمیشن رخ نخواهد داد، زیرا مقدار پیش فرض این ویژگی 0s (صفر ثانیه) است.

در مثال بالا، ما با استفاده از کلمات کلیدی from و to (که %0 برای شروع، و 100% را برای پایان مشخص می کنند)، مشخص کرده ایم که استایل ما چه موقع باید تغییر کند. این امکان نیز وجود دارد تا از درصد نیز استفاده کنیم. با استفاده از درصد، می توانیم هر تعداد تغییرِ استایل را که بخواهیم، اضافه کنیم.

در مثال زیر، مقدار ویژگی background-color از عنصر <div> ، وقتی که انیمیشن %25 کامل می شود و وقتی که %50 کامل می شود و دوباره وقتی که %100 کامل می شود، را تغییر می دهیم:

 /* کدهای انیمیشن */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* عنصری که انیمیشن باید به آن اضافه شود */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

در مثال زیر، وقتی که انیمیشن %25 کامل می شود و وقتی که %50 کامل می شود و دوباره وقتی که %100 کامل می شود، ویژگی  background-color را تغییر داده و ویژگی position نیز تغییر داده شده است:

 /* کدهای انیمیشن */
@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;}
}

/*عنصری که باید انیمیشن به آن اعمال شود*/
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

تاخیر یا Delay برای یک انیمیشن

ویژگی animation-delay مشخص می کند که در شروع یک انیمیشن، یک تاخیر یا وقفه ایجاد شود. در مثال زیر، قبل از شروع شدن انیمیشن، 2 ثانیه تاخیر یا وقفه ایجاد می شود:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

برای ویژگی animation-delay می توانیم از مقادیر منفی نیز استفاده کنیم. اگر از مقادیر منفی استفاده کنیم، انیمیشن طوری شروع می شود که انگار قبلاً N ثانیه در حال پخش بوده است. در مثال زیر، انیمیشن طوری شروع می شود که انگار قبلاً 2 ثانیه در حال پخش بوده است:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

 تنظیم اینکه یک انیمیشن چند بار باید اجرا شود

با استفاده از ویژگی animation-iteration-count می توانیم تعداد اجرا شدن یک انیمیشن را مشخص کنیم. در مثال زیر، انیمیشن قبل از اینکه متوقف شود، سه بار اجرا می شود:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

 در مثال زیر، از مقدار بی نهایت(infinite)، برای اینکه انیمیشن برای همیشه تکرار شود، استفاده شده است:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

اجرای انیمیشن در جهت معکوس یا چرخه های جایگزین(Alternate Cycles)

ویژگی  animation-direction مشخص می کند که آیا یک انیمیشن باید به سمت جلو یا به سمت عقب پخش شود یا اینکه در چرخه های جایگزین(alternate cycles) پخش شود. ویژگی animation-direction می تواند مقادیر زیر را داشته باشد:

1. normal : با استفاده از این مقدار، انیمیشن به صورت عادی(به سمت جلو) حرکت می کند. این مقدار، برای این ویژگی پیش فرض است.

2. reverse : با استفاده از این مقدار، انیمیشن در جهت معکوس پخش می شود(رو به عقب).

3. alternate : انیمیشن در ابتدا رو به جلو پخش می شود، سپس رو به عقب.

4. alternate-reverse : با استفاده از این مقدار، انیمیشن در ابتدا رو به عقب پخش می شود، سپس رو به جلو پخش می شود.

در مثال زیر، انیمیشن به صورت معکوس پخش می شود(رو به عقب):

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

در مثال زیر، از مقدار alternate استفاده شده است تا انیمیشن در ابتدا رو به جلو پخش شود، سپس رو به عقب پخش شود:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

در مثال زیر، از مقدار alternate-reverse استفاده شده است تا انیمیشن در ابتدا رو به عقب پخش شود، سپس رو به جلو پخش شود:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

مشخص کردن سرعت منحنی(Speed Curve) در انیمیشن

ویژگی animation-timing-function سرعت منحنی انیمیشن را مشخص می کند. ویژگی animation-timing-function می تواند مقادیر زیر را داشته باشد:

1. ease : مشخص می کند که یک انیمیشن در ابتدا آهسته باشد، سپس سریع شود، سپس آهسته پایان یابد(این پیش فرض است).

2. linear : مشخص می کند که یک انیمیشن با یک سرعت ثابت از ابتدا تا انتها اجرا شود.

3. ease-in : یک انیمیشن را مشخص می کند که شروع آن، آهسته است.

4. ease-out : مشخص می کند که یک انیمیشن پایانی آهسته داشته باشد.

5. ease-in-out : مشخص می کند که یک انیمیشن شروع و پایانی آهسته داشته باشد.

6. cubic-bezier(n,n,n,n) : به ما امکان می دهد تا مقادیر دلخواه خود را در یک تابع cubic-bezier تعریف کنیم.

در مثال زیر، از برخی از سرعت های منحنی مختلف که می توانند مورد استفاده قرار گیرند، استفاده شده است:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

مشخص کردن  fill-mode برای انیمیشن

انیمیشن های CSS، قبل از اینکه اولین فریم کلیدی(keyframe) پخش شود یا پس از اینکه آخرین فریم کلیدی پخش شود. بر روی یک عنصر اثری نمی گذارند.

ویژگی animation-fill-mode می تواند این رفتار را تغییر دهد. ویژگی animation-fill-mode، وقتی که انیمیشن در حال پخش نیست(یعنی قبل از اینکه شروع شود، یا پس از اینکه پایان یافت یا هردو) برای عنصر هدف، یک استایل را مشخص می کند. ویژگی animation-fill-mode می تواند مقادیر زیر را داشته باشد:

1. none : پیش فرض است. با استفاده از این مقدار، انیمیشن هیچ استایلی را قبل یا بعد از اجرای آن، به عنصر اعمال نمی کند.

2. forwards : با استفاده از این مقدار، عنصر مورد نظر مقادیر استایلی که توسط آخرین فریم کلیدی(keyframe) تنظیم شده اند را حفظ می کند(به animation-direction و animation-iteration-count بستگی دارد).

3. backwards : با استفاده از این مقدار، عنصر مورد نظر، مقادیر استایلی که توسط اولین فریم کلیدی(بسته به animation-direction) تنظیم شده اند را دریافت می کند و آن را در مدت animation-delay حفظ می کند.
4. both : با استفاده از این مقدار، انیمیشن از قواعد forwards و forwards پیروی می کند و در هردو جهت، ویژگی های انیمیشن را گسترش می دهد.

در مثال زیر، به عنصر <div> امکان می دهیم تا وقتی که انیمیشن پایان می یابد، مقادیر استایل را از آخرین فریم کلیدی(keyframe) حفظ کند:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

در مثال زیر، به عنصر <div> امکان می دهیم تا قبل از اینکه انیمیشن شروع شود(در حین مدت زمان animation-delay) مقادیر استایل را که توسط اولین فریم کلیدی تنظیم شده اند، دریافت کند:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

در مثال زیر، به یک عنصر <div> امکان می دهیم تا مقادیر استایل را  که توسط  اولین فریم کلیدی تنظیم شده اند،  قبل از اجرای انیمیشن، دریافت کند و مقادیر استایل را از آخرین فریم کلیدی، وقتی که انیمیشن پایان می یابد، حفظ کند:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

ویژگی خلاصه شده ی Animation

در مثال زیر، از 6 ویژگی انیمیشن استفاده کرده ایم:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

با استفاده از ویژگی خلاصه شده ی animation می توانیم همین کار را انجام دهیم:

div {
  animation: example 5s linear 2s infinite alternate;
}

ویژگی های انیمیشن در CSS

در جدول زیر، لیست قواعد keyframes@ و تمام ویژگی های animation در CSS نشان داده شده است: