CSS трансформации и анимация

Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.

Для реализации CSS анимации необходимо выставить специальные настройки трансформации, которые будут реагировать на события мыши. Также необходимо указать специальную функцию, которая будет отвечать за время выполнения анимации.

Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE - на -ms.

1. Введение в CSS трансформации

CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);

В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:

div 1 Перемещён вправо -webkit-transform: translate(3em,0);
div 2 Повёрнут на 30 градусов по часовой стрелке -webkit-transform: rotate(30deg);
div 3 Смещён влево и вниз -webkit-transform: translate(-3em,1em);
div 4 Увеличен вдвое -webkit-transform: scale(2);

Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.

2. Анимация

Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:

box 1
box 2
box 3
box 4

Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.

CSS анимация может применяться не только к трансформациям, но также и к другим свойствам, таким как прозрачность, цвет и многое другое. Это продемонстрировано в следующем примере. Один элемент преобразуется в другой и наоборот:

Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.

4. Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

<style type="text/css">

    #submenu {
        background-color: #eee;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    #submenu:hover {
        background-color: #fc3;
        -webkit-transform: rotate(360deg) scale(2);
        -moz-transform: rotate(360deg) scale(2);
        -o-transform: rotate(360deg) scale(2);
        -ms-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
    }

</style>

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

box 1
box 2

4. Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

<style type="text/css">

    #outerspace {
        position: relative;
        height: 400px;
        background: #0c0440 url(/images/outerspace.jpg);
    }
    div.rocket {
        position: absolute;
        bottom: 10px;
        left: 20px;
        -webkit-transition: all 3s ease-in;
        -moz-transition: all 3s ease-in;
        -o-transition: all 3s ease-in;
        -ms-transition: all 3s ease-in;
        transition: all 3s ease-in;
    }
    div.rocket img {
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket {
        -webkit-transform: translate(540px,-200px);
        -moz-transform: translate(540px,-200px);
        -o-transform: translate(540px,-200px);
        -ms-transform: translate(540px,-200px);
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket img {
        -webkit-transform: rotate(70deg);
        -moz-transform: rotate(70deg);
        -o-transform: rotate(70deg);
        -ms-transform: rotate(70deg);
        transform: rotate(70deg);
    }

</style>

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

rocket animation .rocket
#outerspace

Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами.

5. Использование различных видов анимации

В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.

При событии :hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.

#stage
#block

Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.

Также обратите внимание, что изменение цвета происходит до поворота.

Фишка в том, что вы можете разбить -webkit-transition на несколько записей:

#block {
  ...
  background: blue;
  ...
  -webkit-transition-property: left, top, background, -webkit-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -webkit-transition-delay: 0, 0, 0, 1s;
  ...
}
#stage:hover #block {
  left: 100px;
  top: 100px;
  background: red;
  -webkit-transform: rotate(360deg);
}

6. Событие одного элемента преобразует другой

Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~.

Вот и соответствующий пример:

#box1
#box2
#stage2

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события.

#box2 {
  position: absolute;
  left: 120px;
  ...
  background: blue;
  ...
}
#box1:hover + #box2 {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  left: 627px;
  background: yellow;
}

В то же время, мы можем анимировать и первый блок:

#box3
#box4
#stage3

Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.

Спасибо Niall за предложенный урок!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.the-art-of-web.com/css/css-animation/#.UWUdVJMvmSr
Перевел: Станислав Протасевич
Урок создан: 10 Апреля 2013
Просмотров: 129377
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^