Переходы CSS3 101: Что такое переходы?

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

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

Анимация == Поведение == JavaScript?

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

Когда я начал веб-разработку в середине 1990-х, не было ни CSS, ни JavaScript. Одним из моих первых проектов была реализация эффекта наведения мыши на некоторые значки — с использованием Java в предварительно скомпилированном апплете. Это было несколько дней усилий.

В течение года JavaScript сделал эффекты наведения неизмеримо проще, и каждый разработчик замусорил свой HTML встроенными onmouseover="changeColor();" onmouseout="changeColorBack();" такими как onmouseover="changeColor();" onmouseout="changeColorBack();" 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:
Просмотрите демонстрационную страницу 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; } 

 transition: all 3s ease; 

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