animation-name

از ویژگی animation-name برای اختصاص دادن یک و یا چند انیمشین به عنصر انتخاب شده استفاده می شود. که آن انیمیشن ها بوسیله دستور keyframes@ ساخته شده اند.

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

.element {
  animation-name: bounce;
}

و یا چندین انیمیشن:

.element {
  animation-name: bounce, shake, slide;
}

وقتی از این روش برای تخصیص چند انیمیشن بصورت یکجا به یک عنصر استفاده می کنید باید توجه داشته باشید که ترتیب آن ها برای تعیین ویژگی های دیگر انیمیشن از قبیل animation-delay, animation-timing-function, animation-duration و غیره, اهمیت خواهد داشت.

به عنوان مثال داریم:

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 3s, 2s, 5s;
  animation-iteration-count: 1, 3, infinite;
}

که انیمیشن bounce به مدت 3s به طول می انجامد و 1 بار اجرا می شود و انیمیشن دوم 2s طول می کشد و 3 بار تکرار می شود و به همین ترتیب تا آخر مقادیر با هم ارتباط دارند.

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

می توان به ویژگی animation-name مقدار none داد, که در این صورت آن عنصر هیچ انیمیشنی نخواهد داشت.

.element {
  animation-name: none;
  /* و یا */
  animation: none;
}

در زیر یک مثال کامل از تعریف یک انمیشن ساده برای یک عنصر آورده شده است. که این انیمیشن change-bg-color نام دارد و بوسیله keyframes@ فریم های کلیدی آن تعریف شده اند و از طریق ویژگی animation-name به عنصری با کلاس element اعمال شده است. همچنین مدت زمان اجرای این انیمیشن 3 ثانیه می باشد و بصورت بی نهایت تکرار می شود.

.element {
  animation-name: change-bg-color;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes change-bg-color {
  from {
    background-color: red;
  }
  
  to {
    background-color: blue;
  }
}

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

See the Pen animation-name by Mojtaba Seyedi (@seyedi) on CodePen.

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