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

 
 

25 دیدگاه برای “انیمیشن ها

  1. سلام
    برای ساخت متن های متحرک که از پایین شروع میشوند و به سمت بالا میان از ویژگی animation استفاده می شود چطور میتونیم loop را به animation اعمال کنیم .کدی که من نوشتم مقدار paused اعمال میشه ولی فقط به سمت بالا میاد وقتی هم forwards رو قرار میدم پرشش از بین نمیره.
    اگر امکان دارد راهنمایی کنید.

    ممنون

    1. سلام. منکه اینطوری متوجه نمیشم.

      باید یک دمو واسم بفرسید. لطفا از jsbin استفاده کنید

      همون کدی ک الان کار نمیکنه رو بزارید توی jsbin.com بعدم آدرسو اینجا بنویسید

    1. کافیه html تون رو توی قسمت html و CSS رو توی قسمت مربوط به خودش بنویسید. وقتی ک خروجی رو توی قسمت output دیدید URL رو کپی کنید اینجا بزاریدش. در ضمن نیاز به ثبت نام هم نیست ولی اگر ثبت نام کنید بعدا به همه کدهایی ک اونجا قرار میدین دسترسی خواهید داشت

    1. لینک رو اشتباه فرستادید. ببینید وقتی همه کد رو کپی کردین اونجا برای اینکه مطمین بشین که ذخیره شده روی صفحه کیک کنید بعد ctrl + S رو بزنید یک url ساخته میشه. اونو بزارید اینجا.

    1. الان مشکل این فقط مکثی هست که اولش داره؟ اگر همینه, مشکل از مقادیر keyframe هاتون هستش. دقیقتر تعیین بشن درست میشه و مکث نداره.

    1. بله. برای حالت autoplya که همین روش شما جواب میده.

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

      http://www.cssscript.com/pu

      یکی هم استفاده از checkbox و یا radio

      https://codepen.io/koheishi
      https://codepen.io/paulnobl

      در مورد استفاده از target این مطلب رو ببینید:

      http://css-tricks.ir/css_re

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

      http://css-tricks.ir/?p=431

  2. برای ساخت carousel ،اسلایدری که در سایت دیجی کالا هست قسمت پر بازدیدترین ها ، هم با روشی که شما گفتید درست میشه؟ منظورم اینکه بدون jq انجام بشه.
    این توضیح در مورد اون اسلایدر درسته :

    مثلا (شش تا محصول )سه تا از محصول ها رو در یک دیو و سه ایتم رو در یک دیو دیگر قرار بدیم زمانیکه رو فلشهای طرفین کلیک میشه حرکت کنه
    کدی که من نوشتم حرکت می کنه وای مخفی نمیشه و دیو دوم هم حرکت نمی کنه.عکس مربوط به ایتمها رو نمیدونم چطور بفرستم.
    http://jsbin.com/vuhegihiku

  3. سلام . خیلی خیلی ممنون به خاطر آموزش های عالی تون .
    پی دی افی دارید که این اموزش ها همه داخل ش باشن . برای اینکه راحت تر بتونیم بخونیم ؟

    1. سلام. نه، ولی می تونید هر مطلبی رو بصورت pdf با استفاده از مرورگرتون ذخیره کنید.

      و یک نکته کوچولو: شما در آینده می خواید توسعه دهنده وب بشید. باید بتونید توی همون محیط هم آموزش ببینید. هر صفحه یا سایتی رو که سر بزنید و بخونید خودش یک تجربه میشه واستون.

      موفق باشید.

  4. سلام، بالا نوشتید که:
    از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن بوسیله CSS بسیار بهینه تر است.
    خب وقتی با جاوا اسکریپت می نوشتیم کنترل توالی با کی بود؟ خب اونم مرورگر هست دیگه، نه؟

  5. سلام خسته نباشید من هنگامی که یک انیمیشن را به یک عنصر اعمال میکنم دیگر نمیتوانم به بقیه عنصر ها هیچگونه انیمیشنی بدهم حتی انیمیشنی که به آن عنصر داده ام و کار هم میکند ولی اگر به عنصر دیگری همان را بدهم کار نمیکند میشه لطفا راهنمایی کنید با تشکر

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