css-animations

انیمیشن ها

Tintin rocketship

انیمیشن ها در CSS باعث می شوند تا ما قادر به متحرک سازی عناصر در صفحات وب باشیم. قبل از ظهور CSS3 بیشتر متحرک سازی ها در دنیای وب بوسیله جاوا اسکریپت صورت می گرفت. از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن بوسیله CSS بسیار بهینه تر است.

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

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

(اگر با ترنزیشن ها آشنا نیستید اول به یادگیری آن بپردازید.)

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

keyframes@

سپس انیمیشن ساخته شده را به یک عنصر نسبت می دهیم:

animation-name

حال می توانیم تعیین کنیم که اجرای انیمیشن چه مدت زمان به طول بیانجامد:

animation-duration

سرعت اجرای انیمیشن را می توان با این ویژگی کنترل کرد:

animation-timing-function

حتی می توانیم قبل از اجرای انیمیشن درنگ داشته باشیم:

animation-delay

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

animation-iteration-count

آیا انیمیشن از اول به آخر اجرا شود یا از آخر به اول؟ و یا هر دو:

animation-direction

می توانیم انیمیشن را طوری تنظیم کنیم که مقادیر نهایی انیمیشن برای عنصر باقی بمانند, و همینطور می توانیم تعیین کنیم عنصر در زمان درنگ چه ویژگی هایی داشته باشد:

animation-fill-mode

دوست دارید انیمیشن را در بین کار متوقف کنید و از همان جا دوباره به حرکت بیندازید؟ 🙂

animation-play-state

و در نهایت می توانیم تمام ویژگی های انیمیشن را بصورت مختصر در یک خط تنظیم کنیم:

animation