Приветствую всех, кто очутился на странице данной публикации. Сегодняшняя статья посвящена очень интересной тематике, в которой важно уметь разбираться и владеть. Это css transition. На сегодняшний день многие веб-сервисы используют анимации и transition занимает весомое место среди этого раздела.
Поэтому я расскажу вам о всех плюшках и особенностях данного элемента, перечислю существующие свойства, связанные с transition, и приведу наглядные примеры. Знаю, что вам не терпится начать обучение, поэтому вперед!
И все-таки объект «переходит»!
В одной из предыдущих статей, связанной с анимацией текста css-средствами, я делал сравнение transition с animation. Если вы хотите углубить свои знания, то после этой статьи можете прочесть и ту.
Данный прекрасный элемент появился вместе с новой спецификацией каскадных таблиц css3.
Если обратить внимание на английское название свойства, то можно сразу понять, о чем пойдет речь. Так как этот термин переводится как «переход», то становится ясно, что он отвечает за анимационные переходы объектов из одного состояния в другое. С его помощью нельзя описать промежуточные состояния анимаций, а только начальную и конечную точки.
Однако хочу подчеркнуть, что описываемое свойство отвечает за плавное изменение состояний. Поэтому если вам нужно реализовать анимированное и мягкое изменение формы какого-либо объекта на веб-странице (например, кнопки), то выбор делайте в сторону переходов. Это и есть главная особенность transition.
Основные свойства
Transition является универсальным параметром, благодаря которому можно указывать какие элементы станут анимированным, как долго будет длиться переход, каким образом будет меняться скорость отображения, а также сразу ли запуститься анимация или чуть погодя.
Однако есть несколько свойств, отвечающих за конкретные значения. Ниже для наглядности я перечислил их и структурировал в таблицу.
| Элемент | Характеристика |
| transition-property | Отвечает за объекты, к которым будет применяться эффект. Можно указать: · Несколько названий; · Все, используя слово all; · Отменить анимацию – none. |
| transition-timing-function | Отвечает за изменение скорости отображения эффектов. Предусмотрено 9 встроенных ключевых слов: easy, linear, steps, easy-in,step-start, easy-out, step-end, easy-in-out, cubic-bezier. Чтобы точно запомнить, как они работают, запустите в коде каждое значение. |
| transition-duration | Указывает продолжительность перехода. Параметр измеряется секундами. |
| transition- delay | Этот параметр также устанавливается в секундах, однако он отвечает за задержку анимации. |
Существуют такие задачи, когда нужно определить всего лишь 2-3 значения, для этого и были созданы отдельные свойства.
Если же необходимо описать все свойства, то лучше это сделать одновременно через transition. Общая форма такой инициализации выглядит вот так:
transition: property duration timing-function delay;
Проверка на совместимость
Так как описываемое свойство появилось относительно недавно, его поддерживают только новые версии браузеров. В других случаях придется использовать префиксы.
Итак, если версии Chrome и Safari старее, чем 26.0 и 6.1 соответственно, то стоит использовать -webkit-transition, которое также применяется к iOS и Android.
В Opera используется свойство -o-transition вплоть до 12.10, а в Firefox ниже 16.0 – -moz-transition.
Практическая часть
Вот и пришло время, которого, я уверен, вы ждали. Практика! Для начала я создал квадратную фигуру. При наведении на нее курсора, с ней происходят изменения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка квадрата</title>
<style>
body {background: #BfBEBE;}
#color_box {
border: 7px double #F8F8FF;
margin-left:39%;
display: block;
height: 282px;
width: 282px;
background-color: #68318b;
-webkit-transition: height 2.5s, width 2.5s, background-color 2.5s, -webkit-transform 2.5s;
transition: height 2.5s, width 2.5s, background-color 2.5s, transform 2.5s;
}
#color_box:hover {
background-color: #FFEBCD;
opasity: 0.2;
width: 160px;
height: 160px;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
</style>
</head>
<body>
<div id="color_box"></div>
</body>
</html> |
Обратите внимание на #color_box:hover.
:hover – это псевдокласс, который указывает, что с объектом будут производиться какие-то действия при наведении на него курсора. Его возможностями пользуются постоянно, если нужно организовать анимацию.
Теперь вы владеете фундаментом написания анимированных переходов. Если вам хочется попрактиковаться или быстро сгенерировать какой-то эффект, то я советую воспользоваться онлайн-решениями как, например, «css3 generator».
Подписывайтесь на мой блог и обязательно рассказывайте о нем своим друзьям. Пока-пока!
С уважением, Роман Чуешов
