animation-name

Содержание

Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя связанное с правилом @keyframes, оно в свою очередь задаёт последовательность движения.

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-name: none | <идентификатор> [, none | <идентификатор>]*

Значения

none
Отключает анимацию.
<идентификатор>

Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-name</title>
  <style>
   .spaceOutUp {
    -webkit-animation-name: spaceOutUp;
    animation-name: spaceOutUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
   }
   @-webkit-keyframes spaceOutUp {
    from {
     opacity: 0;
     -webkit-transform-origin: 50% 0%;
     -webkit-transform: scale(.2) translate(0%, -200%);
    }
    to {
     opacity: 1;
     -webkit-transform-origin: 50% 0%;
     -webkit-transform: scale(1) translate(0%, 0%);
    }
   }
   @keyframes spaceOutUp {
    from {
     opacity: 0;
     transform-origin: 50% 0%;
     transform: scale(.2) translate(0%, -200%); 
    }
    to {
     opacity: 1;
     transform-origin: 50% 0%;
     transform: scale(1) translate(0%, 0%);
    }
   }
  </style>
 </head>
 <body>
  <img src="image/thumb1.jpg" alt="" class="spaceOutUp">
 </body>
</html>

Объектная модель

Объект.style.animationName

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-name.

Opera до версии 12.10 поддерживает свойство -o-animation-name.

Firefox до версии 16 поддерживает свойство -moz-animation-name.

Спецификация

СпецификацияСтатус
CSS AnimationsРабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1031212.104516
AndroidFirefox MobileOpera MobileSafari Mobile
25161212.104




Рекомендую хостинг: beget.ru

Сервер падал:49 дн. 22:28 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru