انیمیشن در css

ساختار انیمیشن ها در CSS

انیمیشن ها، از نظر ساختاری، شباهت زیادی به transition ها دارن که در مورد transition ها می‌تونین تو مقاله transition ها در CSS بیشتر مطالعه کنین.

اما برای درک تفاوتشون، باید به تعریف اون ها دقت کنیم.

تعریف transition، عبارت است از: تغییر استایل یک یا چند عنصر،‌ از یک حالت به حالت دیگر، در طول مدت زمانی خاص.

تعریف انیمیشن هم به همین شکله، اما با یک تفاوت کوچیک و همینطور، بنیادی: تغییر استایل یک یا چند عنصر،‌ از یک حالت به حالت های متعدد، در طول مدت زمانی خاص.

انیمیشن ها در CSS، از دو قسمت کلی تشکیل می‌شن:

• خاصیت های انیمیشن
• کلمه کلیدی keyframes@

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

خاصیت های انیمیشن

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

خاصیت هایی نظیر نام اون، مدت زمان، نحوه تکرار، تعداد بار های اجرا شدن و غیره.

تمام این خاصیت ها، به عنصری که قراره انیمیت بشه (مورد انیمیشن شدن قرار بگیره!) اختصاص داده می‌شه.

تعیین این خاصیت ها، دقیقا مثل تعیین خاصیت های یک transition هست، با یک سری فرق کوچیک.

این خاصیت ها عبارتند از:

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

خاصیت animation-name

اولین قدم برای ساخت انیمیشن در CSS، اختصاص دادن یک اسم به اونه.

این اسم می‌تونه هر اسم دلخواهی باشه.

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

div{ animation-name: myFirstAnimation; }

خاصیت animation-duration

خاصیت دومی که در ساخت یک انیمیشن به کار می‌ره، خاصیت animation-duration هست.

توسط این خاصیت، می‌تونیم مشخص کنیم که انیمیشن ما،‌قراره در طول چه مدت زمانی اجرا بشه.

مقادیر مورد قبول این خاصیت، مقادیر زمانی بر حسب ثانیه و یا میلی ثانیه هستن.

تو کد زیر، تعیین می‌کنیم که انیمیشن ما، باید در طول ۲ ثانیه،‌ اجرا بشه.

div{ animation-name: myFirstAnimation;

animation-duration: 2s; }

نکته: تعیین کردن این خاصیت، ضروریه، چرا که در غیر این صورت، مقدار پیشفرض اون صفر ثانیه تلقی شده و در نهایت، انیمیشن ما اجرا نمی‌شه.

خاصیت animation-delay

توسط این خاصیت، می‌تونیم اجرای انیمیشن رو به تاخیر بندازیم.

مقادیر مورد قبول این خاصیت،‌ مقادیر زمانی بر حسب ثانیه و یا میلی ثانیه هستن.

به کد زیر توجه کنین:

div{ animation-name: myFirstAnimation;

animation-duration: 2s;

animation-delay: 1.5s; }

به شما این امکان را می‌دهد تا تعیین کنید که چه زمان انیمیشن (یا بخش‌هایی از آن) شروع می‌شود. یک مقدار مثبت (مانند 2s) انیمیشن را 2 ثانیه بعد از شروع آن شروع می‌کند. این عنصر تا آن زمان باقی خواهد ماند. مقدار منفی (مانند 2s-) انیمیشن را یکباره شروع می‌کند اما در ثانیه 2 وارد انیمیشن می‌شود.

نکته: مقدار در ثانیه (s) یا میلی ثانیه (mil) تعریف می‌شود.

سینتکس CSS:

animation-delay: 5s;

نحوه‌ی کدنویسی مختصر(توصیه شده):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay];
animation:  bounceIn 2s ease-in-out 3s;

خاصیت animation-iteration-count

این خاصیت، تعداد بار هایی رو مشخص می‌کنه که انیمیشن ما، قراره اجرا بشه. مقادیر ممکن عبارتند از:

# – تعداد مشخصی از تکرارها (پیش فرض 1 است).

infinite – انیمیشن برای همیشه تکرار می‌شود.

initial – تعداد تکرار را به مقدار پیش‌فرض تنظیم می‌کند.

inherit – ارزش را از والدین به ارث می‌برد.

این خاصیت رو هم به کدمون اضافه می‌کنیم:

div{ animation-name: myFirstAnimation;

animation-duration: 2s;

animation-delay: 1.5s;

animation-iteration-count: infinite;

}

بدین ترتیب، انیمیشن مورد نظر ما تا ابد تکرار می‌شه.

سینتکس CSS:

animation-iteration-count: 2;

نحوه‌ی کدنویسی مختصر(توصیه شده):

animation: [animation-name]
 [animation-duration] 
[animation-timing-function]
 [animation-delay]
 [animation-iteration-count];
 animation:  bounceIn 2s ease-in-out 3s 2;
 animation-direction

خاصیت animation-direction

این خاصیت، جهت اجرا شدن انیمیشن رو مشخص می‌کنه.

مقادیر مورد قبول این خاصیت، عبارتند از:

• normal: مقدار پیش‌فرض. انیمیشن به صورت مستقیم اجرا می‌شه.
• reverse: انیمیشن به صورت وارونه اجرا می‌شه.
• alternate: انیمیشن تو چرخه اول به صورت مستقیم،‌ و تو چرخه دوم به صورت وارونه اجرا می‌شه.
• alternate-reverse: انیمیشن تو چرخه اول به صورت وارونه، و تو چرخه دوم به صورت مستقیم اجرا می‌شه.

همونطور که مشاهده می‌کنین، گوی های normal و reverse بعد از اتمام انیمیشنشون، دوباره به حالت اولیه بر می‌گردن.

اما این موضوع در مورد دو گوی دیگه صادق نیست.

اون ها در هنگام اتمام حرکت انیمیشنی خودشون، همون راهی که رفتن رو مجددا برمی‌گردن، و باز یک چرخه جدید رو شروع می‌کنن.

 

خاصیت animation-timing-function

این خاصیت رو، زمانی استفاده می‌کنیم که می‌خوایم سرعت تغییر استایل در مراحل مختلف animation رو مشخص کنیم.

خاصیت مورد نظر، مقادیر زیر رو قبول می‌کنه.

• ease: مقدار پیش فرض
• ease-in: این مقدار، با سرعت پایین شروع می‌کنه و در انتها به سرعت بالا می‌رسه.
• ease-out: این مقدار، با سرعت بالا شروع می‌کنه و در انتها به سرعت پایین می‌رسه.
• ease-in-out: این مقدار، با سرعت پایین شروع می‌کنه، در میانه به سرعت بالا می‌رسه و در انتها مجددا به سرعت پایین می‌رسه.
• linear: این مقدار، تمام فرآیند رو با سرعت یکسان انجام می‌ده.

خاصیت animation-fill-mode

مشخص می‌کند که استایل‌های انیمیشن، قبل یا بعد از پخش انیمیشن قابل مشاهده هستند یا خیر. این ویژگی کمی گیج‌کننده است، اما یک بار که آن را درک کنید، برایتان بسیار مفید خواهد بود.

به طور پیش‌فرض، انیمیشن قبل یا پس از شروع انیمیشن روی استایل‌های عنصر تأثیر نمی‌گذارد (در صورت وجود تأخیر در انیمیشن).

مقادیر ممکن عبارتند از:

backwards – قبل از انیمیشن (در طول تاخیر در انیمیشن)، استایل‌های keyframe اولیه (0٪) بر روی عنصر اعمال می‌شود.

Forward – پس از اتمام انیمیشن، استایل‌های تعریف شده در keyframe نهایی (100٪) توسط عنصر حفظ می‌شوند.

both – انیمیشن قوانین را برای هر دوی backwards و Forward رعایت می‌کند و ویژگی‌های انیمیشن را قبل و بعد از انیمیشن گسترش می‌دهد.

normal (پیش فرض) – انیمیشن هیچ استایلی را برای عنصر، قبل یا بعد از انیمیشن اعمال نمی‌کند.

سینتکس CSS:

animation-fill-mode: forwards;

نحوه‌ی کدنویسی مختصر(توصیه شده):

animation: [animation-name]

[animation-duration]

[animation-timing-function]

[animation-delay]

[animation-iteration-count]

[animation-direction]

[animation-fill-mode];

animation:  bounceIn 2s ease-in-out 3s 3 forwards;

خاصیت animation-play-state

کاربرد این خاصیت، مشخص کردن حالت انیمیشن خواهد بود.

مقادیر مورد قبول این خاصیت عبارت هستن از:

• running: حالت پیش فرض. انیمیشن در حال اجرا خواهد بود.
• paused: انیمیشن متوقف خواهد شد.

این خاصیت رو معمولا برای زمانی استفاده می‌کنیم که می‌خوایم در شرایط خاصی، یک انیمیشن رو متوقف کنیم یا به حرکت بندازیم.

برای مثال، فرض کنین که عنصر divای داریم که در حال انیمیت شدن هست و می‌خوایم زمانی که نشانگر رو روی اون می‌بریم، انیمیشن مورد نظر متوقف بشه.

کافیه بنویسیم:

div:hover{

animation-play-state: paused;

}

خاصیت animation

این خاصیت، خاصیت کوتاه شده تمامی خاصیت های دیگه انیمیشن محسوب می‌شه.

با کمک این خاصیت،‌ می‌تونیم تمامی ویژگی های انیمیشنمون رو در یک دستور تعریف کنیم.

مقادیر وارد شده به این خاصیت،‌ مثل خاصیت کوتاه شده transition، ترتیب خاصی ندارن. می‌تونیم برای نظم تو کدامون از ترتیب فرضی زیر استفاده کنیم:

animation: name/duration/timing-function/delay/iteration-count/direction/fill mode/play state;

فقط باید به یک نکته توجه کرد: همیشه مقدار delay رو بعد از duration بنویسید. در غیر این صورت، ممکنه این دو مقدار رو با هم اشتباه بگیره.

بیاین بررسی کنیم و ببینیم که این خاصیت،‌چقدر می‌تونه کدای ما رو سبک کنه؟ به مثال زیر توجه کنین:

/* --- دستورات با خاصیت های اصلی --- */
animation-name: explode; 
animation-duration: 3s; 
animation-timing-function: linear; 
animation-iteration-count: 4; 
animation-fill-mode: forwards;
/* --- دستورات با خاصیت کوتاه شده --- */
animation: explode 3s linear 4 forwards;

همونطور که می‌بینیم، تونستیم ۵ خط دستور رو در یک خط خلاصه کنیم

کلمه کلیدی keyframes@

مرحله دوم ساختن یک انیمیشن در CSS، تعیین مراحل پیشروی اون هست.

اینکه قراره اون انیمیشن، با توجه به خاصیت هایی که براش تعیین شده، چه کاری انجام بده.

این کار رو، با استفاده از کلمه کلیدی keyframes@ انجام می‌دیم:

برای استفاده از keyframes@، کافیه اون رو بنویسیم و بعد از اون، اسم انیمیشن مورد نظرمون رو وارد کنیم.

برای مثال، جهت انیمیت کردن یک عنصر div، می‌تونیم از کد زیر استفاده کنیم.

div{ animation-name: myFirstAnimation;

animation-duration: 2s;

animation-delay: 1.5s;

animation-iteration-count: infinite;

}

@keyframes myFirstAnimation{

/* — مراحل پیشروی انیمیشن — */ }

حالا مراحل پیشروی انیمیشن رو چطور مشخص می‌کنیم؟

به این منظور، دو راه پیش رومون داریم:

• استفاده از from و to
• استفاده از درصد پیشروی

استفاده از from و to

این روش برای انیمیشن های ساده استفاده می‌شه، عموما انیمیشن هایی که تو دو مرحله خلاصه می‌شن.

به کد زیر دقت کنین:

@keyframes myFirstAnimation{

from{

transform: scale(1);

}

to{

transform: scale(2);

}

}

کافیه برای قسمت from، استایل اولیه عنصرمون رو بنویسیم و در قسمت to، استایلی رو می‌نویسیم که عنصر قراره به سمت اون انیمیت بشه.

استفاده از درصد پیشروی

روش دومی که می‌تونیم برای مشخص کردن مراحل انیمیشن استفاده کنیم، استفاده از درصد پیشروی انیمیشن هست.

همونطور که از اسمش معلومه، تو این روش، دیگه با دو مرحله استایل ابتدایی و انتهایی انیمیشن روبرو نیستیم، بلکه می‌تونیم در هر کجا از چرخه انیمیشنمون، استایل مورد نظرمون رو وارد کنیم.

این موضوع، دست ما رو برای استفاده از مراحل بیشتری تو انیمیشنمون باز می‌کنه.

حالا بیاید به مراحل اون یه نگاهی بندازیم:

@keyframes secondAnimation{

0%{ left:0px; top:0px;

background-color:indianred; }

50%{ left:100px; top:10px;

background-color:lightblue; }

100%{ left:30px; top:30px;

background-color:lightgreen; }

}

همونطور که میبینیم،‌ انیمیشن مورد نظر ما، در نقاط ۰٪ (ابتدای انیمیشن)، ۵۰٪ (نیمه ی انیمیشن) و ۱۰۰٪ (انتهای انیمیشن) دارای استایل های متفاوتی هست، و انیمیشن مورد نظر، ‌فقط حاصل انتقال عنصر بین این استایل هاست.

همونطور که گفته شد، در استفاده از درصد پیشروی دستمون خیلی بازه.

ما می‌تونیم در هر درصد پیشروی دلخواهی از انیمیشنمون، استایل متفاوتی رو قرار بدیم تا اون رو جذاب تر کنیم.

خاصیت های انیمیشن ناپذیر

تا اینجا چند خاصیت نظیر background-color و position رو تو اجرای انیمیشن بررسی کردیم.

اما تمامی خاصیت های CSS، نمی‌تونن انیمیشن پذیر باشن.

این موضوع در مورد بحث transition هم صادقه، خاصیت هایی که نمی‌تونن شامل مراحل مختلف باشن، با انیمیشن ها و transition ها کنار نمیان و کار نمی‌کنن.

برای مثال، خاصیت width، یک خاصیت انیمیشن پذیر محسوب می‌شه. چرا که برای تغییر عرض یک عنصر از ۱۰۰ پیکسل به ۵۰۰ پیکسل، می‌تونیم مراحل زیر رو طی کنیم:

1. از ۱۰۰ تا ۲۰۰
2. از ۲۰۰ تا ۳۰۰
3. از ۳۰۰ تا ۴۰۰
4. از ۴۰۰ تا ۵۰۰

یا برای تغییر شفافیت یک عنصر از ۰.۴ تا ۱، توسط خاصیت opacity، مراحل زیر رو طی می‌کنیم:

1. از ۰.۴ الی ۰.۷
2. از ۰.۷ الی ۱

اما خاصیت هایی مثل display، از خاصیت هایی هستن که نمی‌تونیم به اون ها انیمیشن و محدوده ی زمانی اختصاص بدیم.

چرا که مرحله خاصی ندارن. طبق خاصیت display، یک عنصر یا هست، یا نیست!

پشتیبانی مرورگر ها

پیشتیبانی مرورگر ها از خاصیت های transition به شرح زیره:

• Desktop Chrome: نسخه ۴ به بالا
• Mobile Chrome: نسخه ۸۱ به بالا
• Desktop Firefox: نسخه ۵ به بالا
• Mobile Firefox: نسخه ۶۸ به بالا
• Desktop Safari: نسخه ۵.۱ به بالا
• Mobile Safari: نسخه ۶.۰ به بالا
• Desktop IE: نسخه ۱۰ به بالا
• Desktop Edge: نسخه ۱۲ به بالا

 

انیمیشن ساده متن در CSS

کدهای HTML:

<h1 class=”ml2″>Sunny mornings</h1>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js”></script>

کدهای CSS:

.ml2 {
font-weight: 900;
font-size: 3.5em;
}

.ml2 .letter {
display: inline-block;
line-height: 1em;
}

کدهای JavaScript:

 

// Wrap every letter in a span
var textWrapper = document.querySelector(‘.ml2′);
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, “<span class=’letter’>$&</span>”);

anime.timeline({loop: true})
.add({
targets: ‘.ml2 .letter’,
scale: [4,1],
opacity: [0,1],
translateZ: 0,
easing: “easeOutExpo”,
duration: 950,
delay: (el, i) => 70*i
}).add({
targets: ‘.ml2’,
opacity: 0,
duration: 1000,
easing: “easeOutExpo”,
delay: 1000
});

اجرای انیمیشن‌های متعدد بر روی یک عنصر

برای افزودن چندین انیمیشن به یک selector، می‌توانید به سادگی مقادیر را با کاما از هم جدا کنید.

به عنوان مثال:

.div {

animation: slideIn 2s, rotate 1.75s;

}

 

نتیجه گیری

تو این جلسه از آموزش CSS با انیمیشن ها تو CSS آشنا شدیم و یاد گرفتیم که چطور می‌تونیم توسط خاصیت های انیمیشن و کلمه کلیدی keyframes@، انیمیشن های ساده ای بسازیم

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

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی