Пятница, 09 Ноября 2012 11:34

WebKit анимация. Описание свойств и примеры

Written by 
Оцени эту запись
(2 Голоса)

Задание анимации объекта образно делится на две части. Сначала нужно анимацию описать (какие свойства и как должны анимироваться), а потом уже применять анимацию к 

 

определенному элементу, задав ее продолжительность, количество повторов и т.д.

 
 
Первый шаг - описание анимации:
 
 
Правило @-webkit-keyframes
 
@-webkit-keyframes 'название анимации' {
   from {
      свойство1: значение1;
      свойство2: значение2;
 
   }
   50% {
      ...
 
   }
   to {
      ...
 
   }
}
 
 
From отвечает за начало анимации, to - за ее окончание. То есть, за начальные и конечные значения анимированного свойства. Между ними можно описывать любые 
 
промежуточные варианты в процентах, хоть по 1%. Промежуточные значения рассчитываются относительно длительности анимации и timing-function, которые будут заданы при 
 
ее вызове.
 
 
Пример:
 
 
@-webkit-keyframes 'fade' {
   from {
      opacity: 1
   }
   95% {
      opacity: 1
   }
   to {
      opacity: 0
   }
}
 
 
Далее идет вызов анимации, то есть применение ее к некоторому элементу.
 
 
.element {
   -webkit-animation:
   'animation-name'
   animation-duration
   animation-timing-function
   animation-delay
   iteration-count
   animation-direction;
}
 
 
Пример:
 
 
-webkit-animation: 'fade' 55s infinite normal;
 
 
Все свойства анимации можно задать одной строкой или же отдельно каждое свойство. Рассмотрим их подробнее.
 
 
-webkit-animation-name
Указывает имя анимации или none(по умолчанию)
 
 
-webkit-animation-duration
Задает продолжительность одного цикла анимации. Значение задается в секундах. По умолчанию равно 0.
 
 
-webkit-animation-timing-function
Описывает метод расчета промежуточных значений анимированных свойств. Значение по умолчанию - ease. Возможные значения - ease, linear, ease-in, ease-out, ease-in-out, cubic-bizier.
 
 
-webkit-animation-delay
Указывает время задержки анимации. Задается в секундах s или миллисекундах ms. Значение по умолчанию - 0.
 
 
-webkit-animation-iteration-count
Задает количество циклов анимации. Значение по умолчанию - 0. Дробные числа округляются до целых в большую сторону, отрицательные приравниваются к нулю. Кроме чисел есть еще значение infinite, которое задает бесконечное значение повторов.
 
 
-webkit-animation-direction
Определяет направление анимации в одну сторону или в обе (туда и обратно). Возможные значения - normal(в одном направлении) и alternate(в прямом и обратном направлениях). По умолчанию - normal.
 
Анимации можно задавать больше одной, через запятую.
 
 
-webkit-animation: 'fall' 92s infinite normal, 'fade' 92s infinite normal;
 
 
Примеры:
 
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов