نحوه کار با انیمیشن ها یا Animations در CSS3

کار با انیمیشن ها یا Animations در CSS3

فهرست عناوین

Animation ویژگی است که با استفاده از آن میتوان عناصر را در یک صفحه وب به حرکت درآورد و یا به اصطلاح میتونیم بگیم با استفاده از این ویژگی میتوان عناصر را در یک صفحه وب متحرک کرد.

مثلا میتونیم مشخص کنیم که وقتی ماوس بروی یک عنصر قرار گرفت اون عنصر به نقطه ای دیگر از صفحه منتقل شود ، یا مثلا وقتی ماوس بروی یک عنصر قرار گرفت اون عنصر رنگ زمینش آروم آروم عوض شه و…

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

@keyframes : یک قانون جهت نحوه اجرای انیمیشن
animation-name : نام انیمیشن برای اتصال به دستور کی فریم
animation-duration : مدت زمان اجرای انیمیشن را مشخص میکند
animation-delay : مدت زمانی را برای شروع شدن انیمیشن مشخص میکند
animation-iteration-count : تعداد دفعات اجرای انیمیشن را مشخص میکند
animation-direction : جهت اجرای انیمیشن را مشخص میکند
animation-timing-function : منحنی اجرای انیمیشن را مشخص میکند
animation-fill-mode : جهت حفظ استایل یک عنصر در هنگام پایان یافتن انیمیشن
animation-play-state : استپ کردن انیمیشن

در ادامه و تا پایان این جلسه میخوام شمارو با تمامی ویژگی های بالا آشنا کنم، بطوریکه پایان این جلسه دیگه بطور کامل با همه ی آنها آشنا شده باشید و بتونید باهاشون کار کنید.

عدم پشتیبانی برخی از مرورگرها از انیمیشن ها + نحوه رفع مشکل

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

اینکه میگم برخی از مرورگرها ، منظورم از نسخه های قدیمی این مرورگرهاست، مثلا نسخه ۴ مرورگر فایرفاکس قدرت پشتیبانی از این ویژگی هارو نداره در نتیجه ما باید از اون تکه کدی که گفتم استفاده نماییم.

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

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
keyframes@	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-name	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-duration	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-delay	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-iteration-count	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-direction	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-timing-function	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-fill-mode	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation-play-state	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰
animation	۸٫۰	۴٫۰	۱۵٫۰	۶٫۰	۱۰٫۰

رفع مشکل عدم پشتیبانی

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

نام مرورگر	Chrome	Firefox	Opera	Safari
دستور پیشوندی	-webkit-	-moz-	-webkit-	-webkit-

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

آشنایی با قانون keyframes@ در CSS3

دستور keyframes@ میتونه یک قانون برای نحوه ی اجرای انیمیشن ایجاد کنه، مثلا با استفاده از این قانون میتونیم بگیم یک عنصر در طول اجرای انیمیشن تا پایان اجرا، رنگ زمینش فلان رنگ باشد و دیگر ویژگی هایی که میتونیم روش اعمال کنیم.

نکته ای که در مورد این دستور وجود داره اینه که ما باید این دستور رو با ویژگی Animation متصل کنیم، یعنی باید بهم وصل شن تا انیمیشن بتونه اجرا شه.

برای متصل شدن keyframes با انیمیشن ما باید از ویژگی animation-name برای ایجاد نام استفاده نماییم و سپس اون نامی که ایجاد کردیم رو بزاریم درون دستور keyframes . (لطفا به دستورات زیر توجه نمایید)

div {
  animation-name: test;
}

@keyframes test {
 .....
}

div {

animation-name: test;

}

@keyframes test {

.....

}

کار با ویژگی Animation-Name در CSS3

همونطور که از نام این ویژگی هم مشخصه ، با استفاده از آن میتوان یک نام را برای انیمیشن مشخص کرد، که این نام را باید درون دستور / قانون keyframes@ که کمی بالاتر باهاش آشنا شدید قرار داد.

مثال : در مثال زیر رنگ عادی و پیش فرض عنصر قرمز می باشد ولی با اجرا شدن انیمیشن رنگ عنصر ۶ ثانیه طول میکشه تا از رنگ نارنجی به رنگ سبز تبدیل شود.

<style>

div {
 animation-name: free-learn;
 animation-duration: 6s;
}

@keyframes free-learn {
 from {background-color: #FF5722;}
 to {background-color: #5db616;}
}

</style>

<style>

div {

animation-name: free-learn;

animation-duration: 6s;

}

@keyframes free-learn {

from {background-color: #FF5722;}

to {background-color: #5db616;}

}

</style>

کار با ویژگی Animation-Duration در CSS3

با استفاده از این ویژگی نیز میتونیم مدت زمانی را برای اجرای انیمیشن مان مشخص نماییم. ( اگه توجه کرده باشید در مثال بالا نیز از این ویژگی استفاده شده است )

مقداری که این ویژگی میتونه بپذیره از نوع زمان می باشد و به شرح زیر : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )

s : برحسب ثانیه
ms : برحسب میلی ثانیه

مثال :

div {
 animation-name: free-learn;
 animation-duration: 2000ms;
}

div {

animation-name: free-learn;

animation-duration: 2000ms;

}

کار با ویژگی Animation-Delay در CSS3

ما علاوه بر مدت زمانی که باید طول بکشه تا یک انیمیشن اجرا بشه، یک زمان هم برای شروع اجرای انیمیشن میخوایم، یعنی میتونیم بگیم ۳ ثانیه بگذره بعدش انیمیشن شروع بشه.

مقداری که این ویژگی میتونه بپذیره از نوع زمان می باشد و به شرح زیر : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )

s : برحسب ثانیه
ms : برحسب میلی ثانیه

مثال :

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-delay: 1s;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-delay: 1s;

}

کار با ویژگی Animation-Iteration-Count در CSS3

در ادامه ی ( آموزش کار با انیمیشن ها یا Animations در CSS3 ) میخواهیم با ویژگی Animation-Iteration-Count آشنا شویم، با استفاده از این ویژگی میتوان تعداد دفعات اجرای انیمیشن را مشخص کرد، مثلا بگیم انیمیشن ما به تعداد ۳ بار تکرار شود.

این ویژگی ۲ مقدار زیر را میتواند بپذیرد :

number : یک عدد از ۱ تا هرعددی که دوس داشتید
infinite : بدون تعداد دفعات یعنی تا همیشه

مثال شماره ۱ : اجرا با تعداد دفعات مشخص شده

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-iteration-count: 2;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-iteration-count: 2;

}

مثال شماره ۲ : اجرای بی نهایت

div {
 animation-name: free-learn;
 animation-duration: 1s;
 animation-iteration-count: infinite;
}

div {

animation-name: free-learn;

animation-duration: 1s;

animation-iteration-count: infinite;

}

کار با ویژگی Animation-Direction در CSS3

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

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

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

مثال شماره ۱ : در حالت معکوس یا reverse

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-direction: reverse;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-direction: reverse;

}

مثال شماره ۲ : در حالت متناوب Alternate ( از نقطه شروع به پایان بصورت متناوب )

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-iteration-count:infinite;
 animation-direction: alternate;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-iteration-count:infinite;

animation-direction: alternate;

}

مثال شماره ۳ : حالت متناوب معکوس ( از نقطه پایان به شروع بصورت متناوب )

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-iteration-count:infinite;
 animation-direction: alternate-reverse;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-iteration-count:infinite;

animation-direction: alternate-reverse;

}

کار با ویژگی Animation-Timing-Function در CSS3

با استفاده از این ویژگی نیز میتوان یک منحنی زمان ( جهت اجرای انیمیشن ) ایجاد کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

linear : از شروع تا پایان با سرعت یکسان
ease-in : شروع با سرعت کم و یواش
ease-out : پایان با سرعت کم و یواش
ease-in-out : شروع و پایان با سرعت کم
steps(int,start|end) : تکه تکه کردن سرعت اجرای انیمیشن
cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از منحنی بزیر یک مقدار از ۰ تا ۱

مثال شماره ۱ : از حالت linear

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-timing-function:linear;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-timing-function:linear;

}

مثال شماره ۲ : از حالت ease-in-out

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-timing-function: ease-in-out;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-timing-function: ease-in-out;

}

مثال شماره ۳ : از حالت steps(int,start|end)

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-timing-function: steps(4,start);
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-timing-function: steps(4,start);

}

مثال شماره ۴ : از حالت cubic-bezier

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

}

کار با ویژگی Animation-Fill-mode در CSS3

با یکی دیگر از ویژگی های انیمیشن از آموزش کار با انیمیشن ها یا Animations در CSS3 با شما همراه هستم، این ویژگی داره میگه که استایل یک عنصر رو در حالت شروع ( from ) و حالت پایان ( to ) و یا در هر ۲ حالت قانون keyframes ، همواره پس از پایان انیمیشن حفظ کن.

فک کنم خوب توضیح ندادم، ببینید اگه مثلا در حالت شروع انیمیشن ما برای یک عنصر رنگ آبی رو تنظیم کنیم ، وقتی انیمیشن تموم شد اون عنصر همچنان رنگش آبی خواهد موند. ( این یعنی حفظ استایل )

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

forwards :
backwards :
both :

مثال شماره ۱ : حالت Forwards

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-fill-mode: forwards;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-fill-mode: forwards;

}

مثال شماره ۲ : حالت Backwards

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-fill-mode: backwards;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-fill-mode: backwards;

}

مثال شماره ۳ : حالت both ( در هر ۲حالت )

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-fill-mode: both;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-fill-mode: both;

}

کار با ویژگی Animation-Play-State در CSS3

اسمش روشه دیگه ، با استفاده از این ویژگی میتوان انیمیشن رو استپ کرد یا در واقع Paused کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

running : بصورت پیش فرض این گزینه می باشد، یعنی انیمیشن اجرا میشود
paused : انیمیشن مکث میشه

مثال شماره ۱ : مکث کردن انیمیشن

div {
 animation-name: free-learn;
 animation-duration: 2s;
 animation-play-state: paused;
}

div {

animation-name: free-learn;

animation-duration: 2s;

animation-play-state: paused;

}

نحوه خلاصه نویسی ویژگی Animation در CSS3

تمامی ویژگی هایی که از اول این آموزش تا الان یاد گرفتید رو میخوایم با استفاده از حالت خلاصه نویسی ، تو یه خط و با استفاده از ۱ ویژگی آنها را ایجاد و اجرا نماییم.

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

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

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

مثال شماره ۱ :

div {
 animation: test 2s 3;
}

div {

animation: test 2s 3;

}

مثال شماره ۲ :

div {
 animation: test 2s 1s 4 alternate;
}

div {

animation: test 2s 1s 4 alternate;

}

بیشتر بخوانیم:

نحوه کار با انیمیشن ها یا Animations در CSS3

کار با انیمیشن ها یا Animations در CSS3

عدم پشتیبانی برخی از مرورگرها از انیمیشن ها + نحوه رفع مشکل

آشنایی با قانون keyframes@ در CSS3

کار با ویژگی Animation-Name در CSS3

کار با ویژگی Animation-Duration در CSS3

کار با ویژگی Animation-Delay در CSS3

کار با ویژگی Animation-Iteration-Count در CSS3

کار با ویژگی Animation-Direction در CSS3

کار با ویژگی Animation-Timing-Function در CSS3

کار با ویژگی Animation-Fill-mode در CSS3

کار با ویژگی Animation-Play-State در CSS3

نحوه خلاصه نویسی ویژگی Animation در CSS3

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

کار با انیمیشن ها یا Animations در CSS3

عدم پشتیبانی برخی از مرورگرها از انیمیشن ها + نحوه رفع مشکل

آشنایی با قانون keyframes@ در CSS3

کار با ویژگی Animation-Name در CSS3

کار با ویژگی Animation-Duration در CSS3

کار با ویژگی Animation-Delay در CSS3

کار با ویژگی Animation-Iteration-Count در CSS3

کار با ویژگی Animation-Direction در CSS3

کار با ویژگی Animation-Timing-Function در CSS3

کار با ویژگی Animation-Fill-mode در CSS3

کار با ویژگی Animation-Play-State در CSS3

نحوه خلاصه نویسی ویژگی Animation در CSS3

مطالب زیر را حتما مطالعه کنید

آموزش انیمیشن‌سازی با CSS

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

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

DOM چیست و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ