Переходы — это наиболее часто используемый тип анимации CSS3. Несмотря на широкое распространение и относительно простой синтаксис, есть несколько подводных камней и возможностей, о которых не знают даже умудренные опытом разработчики. Это первый из четырех уроков в цикле о переходах CSS3, но каждый урок можно изучать отдельно или не по порядку. Давайте начнем с основ. 

Анимация = Активность = JavaScript? 

Один из доводов против переходов CSS3 – то, что они создают активность и посягают на территорию JavaScript. Это правда, но CSS делает это уже много, много лет.

В веб-разработке средины 1990-х не существовало ни CSS, ни JavaScript. Тогда сложной задачей на несколько дней работы было внедрить эффект при наведении указателя мыши на уменьшенное изображение при использовании Java в предварительно скомпилированной библиотеке.

Буквально через год JavaScript сделал эффекты при наведении указателя мыши неизмеримо более просто достижимыми, и каждый разработчик засорил свой код HTML строковыми событиями, такими как onmouseover="changeColor();" onmouseout="changeColorBack();".

Вскоре после этого CSS представил динамические псведоклассы, такие как :hover, :active и :focus. Стало возможно отделять файлы стилей от HTML и внедрять простые эффекты за секунды. Разве кому-нибудь хотелось возвращаться к использованию JavaScript для этих целей?

Переходы CSS3 основаны на существующих приемах CSS. Они не позволяют управлять изображением покадрово, что доступно для JavaScript, но сложная анимация редко нужна для простых модулей страниц, таких как всплывающие окна и меню. Хотя изначально мы относились к этому скептически, но анимации CSS3 – это джин, выпущенный из бутылки, которого никогда уже не загнать обратно.

Преимущества CSS3 

Хотя все еще есть много ситуаций, в которых анимация на JavaScript подойдет больше, лучше использовать CSS3 там, где это возможно:

1. Переходы CSS3 стандартно поддерживаются браузером. Они всегда будут быстрее, чем сопоставимая анимация на JavaScript.
2. Анимация на JavaScript без сомнений более сложная. Оцените математическую сложность использования естественно выглядящих ускорений и замедлений, даже если знать формулы, потребуется несколько строк кода и тщательная проверка результата. В CSS3 это можно сделать с помощью одного свойства.
3. Некоторые эффекты будут неэффективны на JavaScript, например, вращение элемента в двух или трех измерениях.

Что такое переход? 

Переход — это самый простой тип анимации CSS3, он определяет эффект, который переключается между двумя состояниями.

Состояния

Переходу требуется точка начала, т. е., начальное состояние, и точка конца, т. е., активное состояние. Например, можно создать элемент, который начинается абсолютно спозиционированно на 0px, окрашенный голубым цветом, и заканчивается на 100px, окрашенный красным цветом. Переход CSS3 может плавно анимировать переход между этими двумя состояниями без необходимости определять отдельные кадры.

Запуск

Переход должен запускаться каким-то образом, чтобы начать анимированный эффект, который в конце достигнет конечного состояния. Это может быть сделано только с помощью CSS при использовании псевдоклассов, таких как :hover и :focus. Можно также запускать анимацию, изменяя одно или больше свойств стилей элементов, используя JavaScript.

Пример перехода CSS2.1 

Давайте рассмотрим очень простой эффект, который можно создать с помощью CSS2.1:

Посмотрите демонстрацию работы.

Наведите указатель мыши на белый блок, и дочерний элемент начнет движение.

В коде HTML есть блок содержимого и текстовый элемент:

<div id="container"> 
    <p>I will be animated</p> 
</div>

Блоку содержимого задано несколько стилей, и он относительно спозиционирован:

#container
{
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #fff;
    border: 2px solid #000;
    margin: 1em auto;
}

Текстовому элементу задан размер и расположение в левом верхнем углу блока содержимого:

#container p
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 70px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
    background-color: #00c;
}

Если навести указатель мыши на блок содержимого, текстовый элемент передвинется в правый нижний угол, и его цвет и радиус границы изменятся:

#container:hover p
{
    left: 500px;
    top: 300px;
    background-color: #c00;
    border-radius: 50px;
}

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

Пример перехода CSS3 

Пример выше работает хорошо, но переход между состояниями не плавный. Давайте добавим немного магии CSS3.

Посмотрите демонстрацию работы.

Наведите указатель мыши на белый блок, и вы увидите тот же самый переход, но он плавно  анимируется между состояниями. Этот эффект бесспорно выглядит гораздо приятней. Вот пример кода CSS3, примененного к селектору #container p и воплощающего анимацию:

transition: all 3s ease;

И это все. Всего двадцать пять знаков. Обратите внимание, можно передвинуть указатель мыши с блока во время анимации, и все плавно вернется на место. Сколько времени займет программирование подобного эффекта на JavaScript?

Правда, мы добавили хитрое свойство transform: rotate(360deg); состоянию при наведении указателя мыши, что можно увидеть в браузерах Firefox и Internet Explorer версии 10 и выше.

Поддержка переходов в разных браузерах 

Переходы без приставок производителей поддерживаются в браузерах Firefox, Internet Explorer версии 10 и выше и Opera версии 12.

Для браузеров на движке Webkit, таких как Chrome, Safari и Opera версий 15 и выше, требуется приставка -webkit-, которую нужно добавить к стандартному свойству, например:

-webkit-transition: all 3s ease;
transition: all 3s ease;

К сожалению, не все браузеры созданы равными. Анимации могут выглядеть странновато в браузере Opera версии 12. К тому же движок Webkit не переносит трансформацию вращения, а также пасует на некоторых других эффектах переходов, поэтому мы не используем свойство -webkit-transform: rotate(360deg);. И, наконец, браузер Internet Explorer версии 9 и ниже вообще не сможет воспроизвести анимацию.

Хотя это не так уж и важно. Если переходы CSS3 не работают вообще или работают, но не как задумано, начальное и конечное состояния будут достигнуты в любом случае. В большинстве случаев браузер просто откатится на переключение между состояниями как в CSS2.1.

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

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также: