جلسه بیست و چهارم: انیمیشن در CSS

انیمیشن در CSS

خوش اومدین به بیست و چهارمین جلسه از دوره آموزش رایگان CSS. امروز قرار هست که بایکی از امکانات پیشرفته CSS آشنا بشیم. ما میتونیم با استفاده از ویژگی animations به اکثر عناصر html قابلیت و امکان انیمیشن رو بدیم، بدون اینکه از جاوا اسکریپت یا فلش استفاده کنیم. این ویژگی باعث میشه که صفحه وب ما پویاتر و جذاب تر بشه و دیتای موردنظرمون در قالبی جذابتر و زیباتر در اختیار کاربر قرار بگیره.

استفاده از ویژگی انیمیشن در CSS

ویژگی انیمیشن در CSS این امکان رو به ما میده که یک عنصر رو در یک بازه زمانی مشخص از یه استایل به یه استایل دیگه تغییر بدیم. با استفاده از این ویژی میتونیم خصوصیات خیلی زیادی از یک عنصر html رو توی یه بازه زمانی تغییر بدیم.

برای استفاده از ویژگی انیمیشن در CSS ما باید ابتدا یه keyframes برای ویژگی خودمون تعریف کنیم. ویژگی keyframes در حقیقت فریم های انیمیشن عناصر ما رو مدیریت میکنه. توی این جلسه بصورت کامل با این موضوعات آشنا میشیم.

در اینجا من با یک مثال نحوه استفاده از دو ویژگی keyframes و animation رو براتون توضیح میدم.

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

در بخش اول من یک keyframe بنام example ایجاد کردم. این کار رو با استفاده از کاراکتر@ و کلمه کلیدی keyframes انجام دادم و یک نام برای این keyframe ایجاد کردم. اینجا من از نام example استفاده کردم که بعدا قرار هست ازش استفاده کنیم. در مقابل اون از آکولاد باز و بسته استفاده کردم و دو ویژگی from و end رو استفاده کردم و مقداردهی کردم. همانطور که مشخص هست استایل نقطه شروع رو داخل from و استایل نقطه پایان رو داخل to قرار میدیم.

حالا در بخش دوم اومدم و برای عنصر div از ویژگی animation-name استفاده کردم و همون keyframes که بالا تعریف کرده بودم رو به عنوان مقدار بهش اختصاص دادم. به این ترتیب بین این دو تا ارتباط برقرار کردم و در نهایت هم برای انیمیشن خودم با استفاده از ویژگی animation-duration زمان اجرا تعیین کردم.

نکته مهم: اگه برای ویژگی animation-duration هیچ مقداری مشخص نکنیم، از مقدار پیشفرض صفر ثانیه استفاده میکنه و در نهایت در خروجی هیچ انیمیشنی نمایش داده نمیشه.

اجرای بیش از ۲ مرحله انیمیشن در CSS

در مثال قبلی ما در ۲ نقطه و مرحله انیمیشن خودمون رو تعریف کردم نقطه اول from بود و نقطه و مرحله دوم to بود. اگه قصد داشته باشیم علاوه بر ابتدا و انتهای انیمیشن بر دیگر نقاط انیمیشن هم دسترسی داشته باشیم و اونها رو مدیریت کنیم میتونیم با استفاده از درصد، انیمیشن خودمون رو به چند قسمت تقسیم کنیم و برای هر بخش استایل خاص اون رو تعریف کنیم. مثال زیر رو ببیینید:

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

در مثال بالا زمانی که keyframes رو تعریف کردم بجای اینکه استایل دهی رو به به from و to بدم، اومدم و به لحظه صفردرصد، ۲۵درصد، ۵۰درصد و ۱۰۰درصد مقداردهی کردم. به این ترتیب موفق شدم به ۴ نقطه دسترسی داشته باشم و برای اون مقدادهی کنم. ما میتونیم به نقاط بیشتری هم دسترسی پیدا کنیم و براشون مقداردهی کنیم. همچنین میتونیم در هر نقطه ای استایل اختصاصی خودمون رو قرار بدیم.

/* The animation code */
@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;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

تاخیر در اجرای انیمیشن در CSS

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

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

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

تعداد دفعات اجرای انیمیشن در CSS

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

مثال زیر رو ببینید:

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

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

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

ویژگی animation-direction

ما این امکان رو داریم که انیمیشن خودمون رو بصورت معکوس و یا عادی اجرا کنیم. همینطور میتونیم از چرخه های ترکیبی هم استفاده کنیم. با استفاده از ویژگی animation-direction میتونیم این تنظیم رو انجام بدیم. این ویژگی ۴ مقدار زیر رو میگیره:

• normal: در این وضعیت انیمیشن ما بصورت عادی اجرا میشه(مقدار پیش فرض)
• reverse: در این وضعیت انیمیشن ما بصورت معکوس اجرا میشه.
• alternate : در این وضعیت ابتدا انیمیشن بصورت عادی نمایش داده میشه و سپس بصورت معکوس اجرا میشه. (حالت رفت و برگشت)
• alternate-reverse : در این وضعیت ابتدا انیمیشن در حالت معکوس و سپس در حالت عادی اجرا میشه(برعکس حالت alternate)

مثال زیر رو ببینید:

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

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

مشخص کردن سرعت اجرای انیمیشن در CSS

ویژگی animation-timint-function این امکان رو به ما میده تا منحنی سرعت انیمیشن در CSS رو مشخص کنیم.

ویژگی animation-timing-function میتونه ۶ تا مقدار زیر رو بگیره:

• ease : در این وضعیت انیمیشن بصورت آهسته شروع میشه، بعد سریع میشه و در آخر هم بصورت آهسته تموم میشه. (حالت پیش فرض)
• linear: در این وضعیت انیمیشن بصورت یکنواخت شروع میشه و تموم میشه.
• ease-in: در این وضعیت انیمیشن بصورت آهسته شروع میشه.
• ease-out: در این وضعیت انیمیشن بصورت آهسته تموم میشه.
• ease-in-out : در این وضعیت انیمیشن بصورت آهسته شروع میشه و بصورت آهسته تموم میشه.
• cubic-bezier(n,n,n,n) :در این وضعیت شما میتونیم مقادیر هر وضعیتی رو خودتون بصورت دستی انتخاب کنید.

#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

انیمیشن CSS روی یک عنصر قبل از اولین فریم keyframe و همچنین بعد از آخرین فریم keyframe تاثیر نمیگذاره. ویژگی anim-fill-mode این مشکل رو رفع میکنه.

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

خصوصیت animation-fill-mode میتونه ۴ مقدار زیر رو بگیره:

• none : این مقدار پیشفرض هست. انیمیشن ما قبل و بعد از اجرا هیچ استایل خاصی روش اعمال نمیشه.
• forwards : این مقدار، مقایر استایل که رو که توسط آخرین فرمان کلید تعیین میشه رو مشخص میکنه(به جهت حرکت و تکرار بستگی داره)
• backwards: این مقدار، مقادیر استایل رو که توسط اولین فریم کلید تعیین شده، مشخص میکنه، دریافت میکنه و در طول مدت زمان تاخیر انیمیشن نمایش میده.
• both : این وضعیت معادل این هست که از دو مقدار forwards و backwards بصورت همزمان استفاده کنیم و خدمات هر دو رو در اختیار ما قرار میده.

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

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

خلاصه کردن کدها و خصوصیات انیمیشن در CSS

در مثال زیر من از ۶ ویژگی مربوط به انیمیشن استفاده کردم:

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

ما میتونیم با استفاده از ویژگی animation تمامی این ویژگی ها را بصورت خلاصه در یک خط وارد کنیم. در قطعه کد پایین من تمامی موارد بالا را در یک خط به div نسبت دادم:

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

همه ویدیوهای دوره آموزش CSS