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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با انیمیشن ها یا Animations در CSS3 با من همراه باشید.

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

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

Free-Learn

کار با انیمیشن ها یا 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 : استپ کردن انیمیشن

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

Free-Learn

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

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

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

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

نام ویژگی 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-

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


Free-Learn

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

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

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

مثال :

امتحان کنید

Free-Learn

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

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

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

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

مثال :

امتحان کنید

Free-Learn

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

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

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

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

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

کار با ویژگی 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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

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

  • forwards :
  • backwards :
  • both :

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

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

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

امتحان کنید

Free-Learn

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

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

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

 

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

Free-Learn

خب دوستان خسته نباشید میگم بهتون ، اینم از ( آموزش کار با انیمیشن ها یا Animations در CSS3 ) ، امیدوارم که هیچ مشکلی در این آموزش نداشته باشید، و اگرم مشکلی هست حتما در قسمت پرسش و پاسخ CSS پیشرفته مشکلتان را مطرح نمایید.

دریافت PDF یا پرینت این مطلب