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
Просмотров: 124909
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 10 Апреля 2013 15:26
    dv27
    Классно.
  • 10 Апреля 2013 16:58
    dr_jack
    было б здорово с 3D трансформаций такие шпаргалочки выложить
  • 11 Апреля 2013 11:00
    Cova4
    Шикарный урок...По больше бы таких
  • 11 Апреля 2013 13:21
    userseal
    В стаж2 и стаж3 квадрат и круг "вылетают" за пределы серой полосы. Так и должно быть? Или это только FF/unix?
  • 11 Апреля 2013 15:15
    timur__timur
    А в IE только отображается первый и последний кадр (при наведении), промежуточных нет (((
  • 11 Апреля 2013 17:26
    alekseev.mihail
    Просто супер))) Спасибо :)
  • 12 Апреля 2013 08:20
    DarkLifes
    В закладки!
  • 12 Апреля 2013 22:36
    misha1212
    Спасибо!
  • 12 Апреля 2013 22:57
    micha
    интересно...
  • 18 Апреля 2013 16:42
    makdoom
    Жаль что в ie как всегда коряво, версия ie 9.0.8112.16421 а урок хорош
  • 11 Июля 2013 19:54
    revqa
    А как после перемещения объекта сделать так, чтобы он остался в том же месте, куда его переместили. Сделал на сайте кнопку "В корзину". При наведении на нее картинка товара летит в корзину с увеличением прозрачности, но как только отводишь курсор - товар возвращается обратно.
    • 13 Февраля 2014 15:44
      barabashka
      смените клас с помощью джаваскрипт. поищите в сети. это строчка-две кода
  • 13 Августа 2015 14:20
    HyL1GaN
    6. Событие одного элемента преобразует другой у меня так не получается, делаю все так же, но ничего не происходит( в хроме подскажите пожалуйста
^ Наверх ^