15
تشکر

انیمیشن در CSS3

CSS3

CSS3

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

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

در ادامه مطلب همراه ما باشید

نحوه ساخت انیمشین

نحوه ساخت انیمشین به این صورت است که شما ابتدا باید keyframeهای انیمشین را بسازید. برای مثال در کد زیر، ما عرض یک عنصر را از 200px به 400px تغییر میدهیم.

@keyframes animate {
  from {
    width: 200px;
  }
  to {
    width: 400px;
  }
}

حالا باید keyframeهای بالا را به یک عنصر مرتبط کنیم. اینکار توسط خاصیت animation-name انجام میشود. همچنین توسط خاصیت animation-duration باید مدت زمان اجرای انیمشین را مشخص کنیم.

animation-duration: 5s;
animation-name: animate;

در مثال زیر ما از پیشوند webkit هم استفاده کردیم.

در صورت باز نشدن iframe

خاصیت‌های animation

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

در مثال زیر زمانی که شما ماوس را روی مستطیل می آورید انیمیشن اجرا و زمانی که ماوس را خارج میکنید انیمیشن متوقف میشود، همچنین با دادن مقدار infinite به خاصیت animation-iteration-count تعداد دفعات تکرار آن را بی نهایت کردیم، و همینطور به جای استفاده از from و to در keyframe از درصد استفاده کردیم.

در صورت باز نشدن iframe

خاصیت دیگری به نام animation-timing-function وجود دارد. در این خاصیت میتوان نوع تابع اجرا کننده انیمشین را مشخص کرد. برای مثال میتوان از توابع linear, ease, ease-in, ease-out یا غیره استفاده کرد. در مثال پایین ما از تابع cubic-bezier استفاده کردیم که این اجازه را به شما میدهد، خودتان یک تابع ایجاد کنید.

در صورت باز نشدن iframe

زمانی را در نظر بگیرید که شما با استفاده از انیمشین عرض یک عنصر را زیاد می‌کنید، اما زمانی که انیمیشن به پایان میرسد دوباره عنصر به عرض اولیه خود برمیگردد. برای اینکه تغییرات انجام شده توسط شما بعد از پایان انیمشین هم اعمال شود باید مقدار forwards را به خاصیت animation-fill-mode بدهید. همچنین توسط خاصیت animation-delay میتوان تاخیری در اجرا انیمشین ایجاد کرد.

در مثال زیر ما انیمشین را یکبار اجرا میکنیم، و برای اینکه تغییرات انجام شده بعد از اجرای انیمشین هم باقی بماند از animation-fill-mode استفاده کردیم. همچنین یک متن به عنصرمان اضافه کردیم و به آن نیز انیمشین دادیم. اما میخواهیم انیمیشن متن، بعد از انیمشین عنصر والد انجام شود، اینکار را بوسیله animation-delay انجام دادیم.

در صورت باز نشدن iframe

همچنین با دادن مقدار reverse به خاصیت animation-direction میتوان یک انیمشین را از انتها به ابتدا اجرا کرد.

رویدادهای انیمیشن

رویداد animationstart زمانی اتفاق می‌افتد که انیمشین اجرا شود. رویداد animationend زمانی اتفاق می‌افتد که انیمشین پایان و رویداد animationiteraction هم زمانی اجرا می‌شود که انیمیشن یک دور خود را تمام کرده باشد.

نتیجه‌گیری

همانطور که میبینید دیگر مسئولیت یک front end developer تبدیل PSD به HTML نیست. بلکه باید با ایده پردازی مناسب از ویژگی‌های جدید CSS3 استفاده مناسب را انجام دهد.

MDN CSS animations

Caniuse

  • راجب attr مطلب ندارید چرا؟؟؟؟؟؟ کارش جالبه برای اظافه کردن ساختار های صفحه با سی اس اس بدرد میخوره
    https://developer.mozilla.org/en-US/docs/Web/CSS/attr
    شدم پایه ثابت وب شما و موزیلا 😉

  • طراحی سایت می‌گه:

    همیشه با درک این animation مشکل داشتم. ممنونم…

  • سالار می‌گه:

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

  • حسین کربلایی می‌گه:

    میگم چه قدر جالبه که آپارنت جمعه ها هم بازه
    :)


  • نظرات این مطلب بسته است.