animation-name | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Главная » Справочник CSS3 » Свойства анимации


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


animation-name | Свойство CSS

Свойство animation-name присваивает имя элементу анимации

Свойство animation-name определяет имя анимационного сценария,при этом имён может быть несколько,разделяйте их запятыми.Так же можно присвоить значение none,анимация будет отключена.Более объективный сценарий создаётся с применением расширенных свойств animation.Дополнительно следует применять альтернативные свойства для браузеров,для Firefox это -moz-animation-name,для Safari или Chrome -webkit-animation-name.Свойство применимо для блочных и строчных элементов и проходит валидацию согласно версии CSS3.


Расширенные значения

ЗначениеОписание
ИмяНазвание анимации на английском

Расширенные свойства

СвойствоОписание
animationДобавляет анимацию в сокращённой форме
animation-durationОпределяет количество секунд или миллисекунд,необходимое для завершения анимации
animation-timing-functionОпределяет скорость кривой анимации
animation-delayОпределяет время задержки анимации до начала проигрывания
animation-iteration-countОпределяет количество воспроизводимой анимации
animation-directionОпределяет,будет ли анимация воспроизводится в обратном направлении
-moz-animation-nameАльтернативное свойство для браузера Firefox
-webkit-animation-nameАльтернативное свойство для браузеров Safari и Chrome
@keyframesДобавляет стиль к воспроизводимой анимации в виде кадров
@-moz-keyframesАльтернативное правило для браузера Firefox
@-webkit-keyframesАльтернативное правило для браузеров Safari и Chrome

Свойство работает в браузерах



Пример применения свойства

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство animation-name</title>
<style>
.animation
{
  width:100px;
  height:100px;
  background:#2b9c00;
  position:relative;
  animation-name:animation;
  animation-duration:7s 2;
  /* Альтернатива для Firefox: */
  -moz-animation-name:animation;
  -moz-animation-duration:7s 2;
  /* Альтернатива для Safari и Chrome: */
  -webkit-animation-name:animation;
  -webkit-animation-duration:7s 2;
}

@keyframes animation
{
  from {left:0px;}
  to {left:400px;}
}
/* Альтернатива для Firefox: */
@-moz-keyframes animation
{
  from {left:0px;}
  to {left:400px;}
}
/* Альтернатива для Safari и Chrome: */
@-webkit-keyframes animation
{
  from {left:0px;}
  to {left:400px;}
}
</style>
</head>
<body>

<div class="animation"></div>

</body>
</html>

Пример в действии



Вот пример применения всех свойств

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство animation</title>
<style>
.animation  {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:animation;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Альтернатива для Firefox: */
-moz-animation-name:animation;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Альтернатива для Safari и Chrome: */
-webkit-animation-name:animation;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
/* Альтернатива для Firefox: */
@-moz-keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
/* Альтернатива для Safari и Chrome: */
@-webkit-keyframes animation
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:400px; top:0px;}
50%  {background:blue; left:400px; top:400px;}
75%  {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="animation"></div>

</body>
</html>


Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-animations/#animation-name-property
Категория: Свойства анимации | Добавил: IZOTOP (22.03.2012) | Автор: Меренков Михаил W
Просмотров: 1764 | Теги: css, -moz-animation-name, -webkit-animation-name, animation-name | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]