آموزش CSS – ساخت انیمیشن در CSS3

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی Transition در CSS3 آشنا شدید. در این بخش قصد داریم به نحوه ساخت انیمیشن در CSS3 یپردازیم.

قابلیت انیمیشن در CSS3 به شما اجازه ساخت انیمیشن های keyframe را می دهد.

ساخت انیمیشن در CSS3

در بخش قبلی نحوه ایجاد انمیشن های ساده مثل تغییر مقدار به دیگر توسط قابلیت transition در css3 را دیدیم.

به هر حال, transition کنترل کمی روی نحوه گسترش انیمیشن در طول زمان مشخص شده را می دهد.

 

ویژگی انیمیشن در CSS3 یک قدم جلوتر از transition, با قابلیت keyframe به شما اجازه مشخص کردن ویژگی های مختلف css طی زمان و درصد پیشرفت کار را می دهد.

ساخت انیمیشن در CSS3 یک فرایند دو مرحله ای بصورت زیر است:

  • اولین قدم ساخت یک انیمیشن css با تعریف یک at-rule به نام @keyframes و نام گذاری آن است
  • قدم دوم اشاره کردن به keyframe با ویژگی animation-name به همراه animation-duration و دیگر ویژگی های اختیاری انیمیشن که رفتار انیمیشن را کنترل می کنند.

به هر حال, ضروری نیست که رول های keyframes را قبل از اشاره یا اعمال کردن آن تعریف کنید.

مثال زیر به شما نحوه انیمیشن دهی باکس <div> بصورت افقی از یک موقعیت به موقعیت بعدی با قابلیت انیمیشن در CSS3 را نشان می دهد.

شما باید حداقل دو ویژگی animation-name و animation-duration (بزرگتر از ۰) را برای کار کردن انیمیشن, مشخص کنید.

به هر حال بقیه ویژگی های animation در css اختیاری است و مقادیر پیش فرض آنها تاثیری بر اجرای آن ندارد.

نکته: همه خصوصیات css قابلیت انیمیشنی را ندارند. بطور معمول, هر خصوصیت css ای که مقادیر عددی, طول, درصد یا رنگ را می پذیرد این قابلیت را دارند.

 

تعریف keyframes

Keyframes ها برای مشخص کردن مقادیر برای ویژگی ها در مراحل مختلف انیمیشن استفاده می شود و بصورت @keyframes مشخص می شود.

سلکتور keyframe برای رول استایل keyframe با درصد ٪ یا کلمه کلیدی from (همان %۰) یا to (همان ۱۰۰%) شروع می شود.

مقدار درصد مشخص کننده درصد زمان انمیشن است که با animation-duration تعریف کردیم و ۰% تعیین کننده نقطه شروع اینیمیشن, ۱۰۰٪ پایان اینیمیشن, ۵۰٪ نقطه وسط ماجرا و به اینصورت …

به این معنا که ۵۰٪ keyframe در یک انیمیشن ۲ ثانیه ای یعنی در ثانیه ۱م.

 

دستور خلاصه نویسی animation

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

ترتیب استفاده از تمام تنظیمات قابل استفاده ار ویژگی animation بصورت مرتب لیست شده است.

نکته: اگر هر یک از مقادیر مشخص نشده بود, مقدار پیش فرض آن در نظر گرفته می شود. به این معنی که اگر مقدار animation-duration مشخص نبود, هیچ انیمیشنی اعمال نمی شود چرا که مقدار پیش فرض ۰ است.

 

خصوصیات Animation در CSS3

جدول زیر یک خلاصه کوتاه از تمام ویژگی های Animation در CSS3 را ارایه می دهد:

خصوصیتتوضیحات
animationیک خصوصیت برای تعریف تمام ویژگی های انیمیشن css بصورت یکجا
animation-nameبرای اختصاص دادن یک و یا چند انیمشین تعریف شده توسط @keyframesبه عنصر انتخاب شده
animation-durationمشخص می کند که چند ثانیه یا میلی ثانیه طول می کشد تا یک حلقه اجرای انیمیشن تکمیل شود.
animation-timing-functionمشحص می کند که یک انیمیشن در طول یک حلقه به چه صورت طی شود
animation-delayمشخص کننده وقفه زمانی قبل از اجرای انیمیشن
animation-iteration-countمشخص می کند که یک انیمیشن قبل از توقف چند بار یک حلقه را تکرار کند
animation-directionمشخص می کند که حلقه تکرار انیمیشن به چه صورت باشد : alternate یا reverse که حتما تست کنید
animation-fill-modeمشخص می کند در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند.
animation-play-stateمشخص می کند که انیمیشن در حال اجرا باشد یا توقف کند : running یا paused
@keyframesبرای تعریف رفتار یک چرخه انیمیشن استفاده می شود و نام تعیین شده در ویژگی animation-name قرار می دهیم

 

امیدوارم در این بخش آموزش CSS, از ویژگی انیمیشن در CSS3  نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link