Анимация, трансформация, переходы css

В CSS 3 появились интересные свойства, с помощью которых можно задать переход трансформацию и анимацию для нужных нам элементов. Это очень удобно, так как не приходится использовать javascript. К минусу можно отнести кроссбраузерность. Не все браузеры поддерживают эти css 3 свойства.
Давайте приступим к рассмотрению данных свойств. Но для начала по традиции создадим стенд для теста. Это будет обыкновенная кнопка. Назовём её testbutton и зададим для неё свойство hover. При наведении на кнопку будет меняться цвет текста и положение. Так как этот пост не о создании кнопок, описывать код не будем.

Сss переходы (transition)

И так наше первое свойство это transition. Что бы переход функционировал нужно выполнить следующие действия:

• Задаём два стиля. Один стиль описывает текущее состояние элемента, другой состояние элемента после перехода css. Например текст на кнопке меняется с белого на чёрный.
• Задаём для стиля, описывающего текущее состояние элемента свойство transition.
• Задаём инициатор, который запускает переход из одного стиля в другой(например hover).

Свойства для обявления перехода:

- transition-property - свойство CSS, к которому мы приложим эффект transition. Можно назначить почти любое свойство (color, border и тд). Для применения перехода ко все свойствам используем all.

-transition-duration - временной интервал, в течении которого происходит переход. (0.5S, 1S, 1.6s)

-transition-timing-function - указывает как будет изменяться скорость перехода за установленный период времени. Может принимать значения:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier

- transition-delay - устанавливает время задержки перед началом перехода.

Пример записи:

 .button{
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 0s;            
}              

Сокращённая форма с браузерными префиксами и рабочий пример css transition:

 .button{
    -o-transition: all 2s ease 0s;
    -ms-transition: all 2s ease 0s;
    -moz-transition: all 2s ease 0s;
    -webkit-transition: all 2s ease 0s;
    transition: all 2s ease 0s;
}
.button:hover{
    border: 3px solid #914B4B;
    color: #000000;
    text-shadow: 0px 2px #ccc;
    box-shadow: 2px 2px 10px 1px rgba(0,0,0, 0.5);
}      

Css трансформация (transform)

Теперь давайте поговорим о трансформациях в css. Начинается описание этого свойства с слова transform. Производится следующая трансформация:

• scale - увеличивает или уменьшает элемент
• translate - двигает элемент в разных направлениях.
• rotate - поворачивает элемент на разные углы.
• skew - скашивает элемент по осям.

Применяются данные свойства например к псевдоклассу элемента hover. Синтаксис c учётом браузерных префиксов выглядит так:

 .button:hover{
   -webkit-transform: scale(0.7);
   -moz-transform: scale(0.7);
   -o-transform: scale(0.7);
   -ms-transform: scale(0.7);
   transform: scale(0.7);
}

В данном коде описано уменьшение кнопки в до 0.7 при наведении на неё курсора мыши. Аналогично пишется код и для других свойств трансформации. Примеры css transform:

scale - увеличивает или уменьшает элемент

translate - двигает элемент в разных направлениях.

rotate - поворачивает элемент на разные углы.

skew - скашивает элемент по осям.

transform-origin - меняет точку приложения трансформации

Css анимация (animation)

У css анимации есть преимущество перед css трансформацией. Анимацию не надо запускать как трансформацию. Этим то css анимация нам и интересна. Она может запускаться например при загрузке страницы. Для создания анимации нам нужно сделать несколько действий:

• определяем кадры анимации (keyframes)
• назначаем нашу анимацию для нужных нам элементов страницы.

Определяем кадры анимации (keyframes). Синтаксис:

 
@keyframes название анимации {
  from {
          CSS-свойства 
            }
   to {
         CSS-свойства 
            }
}

Пример:

 
@keyframes blink {
    from {
        box-shadow: 0 0 10px 0 rgba(237, 19, 19, 0.5);
        background: #913411;
    }
    50%{
       box-shadow: 0 0 10px 10px rgba(237, 19, 19, 0.5);
       background: #D52B0F;
    }
    to{
        box-shadow: 0 0 10px 0 rgba(237, 19, 19, 0.5);
        background: #913411;
    }
}

В данном примере происходит изменение в середине css animation. Увеличивается радиус тени и меняется цвет фона. К концу анимации всё возвращается к начальным значениям. Так же в данном примере мы не описали кадры анимации для других браузеров. В боевом коде у нас будет присутствовать такой же код только отдельно для каждого браузерного префикса(@-webkit-keyframes, @-o-keyframes, @-moz-keyframes).

И вот мы создали кадры анимации. Давайте их теперь применим к нашей кнопке class="button". Так же анимацию можно прикрутить и к псевдоклассам (:hover, :focus и тд). Свойства почти такие же что и в переходах. Опишем включение нашей анимации с именем "blink" при наведении курсора мыши на кнопку.

Css анимация пример:

 
.button12:hover{
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
 }

Сокращённая форма записи с учётом браузерных префиксов

 
.button12:hover{
    animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
}

Пример: