animation

animation یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد:

فرض کنید مقادیر یک انیمیشن بصورت زیر برای یک عنصر تنظیم شده اند:


.element {
  animation-name: bounce;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: .3s; 
  animation-iteration-count: 10;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

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


.element {
  animation: bounce 3s ease-out .3s 10 alternate both running;
}

ترتیب نوشتن مقادیر در این روش اهمیت ندارند به جز وقتی که دو زمان برای animation-duration و animation-delay تنظیم می شوند در این صورت اولین زمان به animation-duration و زمان دوم به animation-delay اختصاص می یابد.

دموی زیر برای بررسی بیشتر آماده شده است. برای آشنایی با ساخت انیمیشن ها باید مطلب مربوط به keyframe@ را بخوانید.

 

See the Pen keyframe demo by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگر ها

سوالت رو توی پنل بحث و گفتگو مطرح کن.

یک دیدگاه برای “animation

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

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