animation

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

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

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

.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.

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