Теперь, когда мы познакомились со свойствами transition и animation, давайте подробнее рассмотрим переходы и взглянем на код!
Переходы
Переходы происходят в браузере при переходе элемента из одного состояния в другое. Для создания движения браузер автоматически рисует кадры между каждым состоянием.
transition — это стилевое свойство. Точно так же, как вы задаёте элементу высоту, ширину или рамку, мы задаём элементам переходы.
Мы можем написать переход в CSS следующим образом:
transition: background 0.5s linear;
В данном случае мы сообщаем браузеру, что переход свойства background займёт полсекунды и использует линейную функцию времени.
Приведённое выше свойство может заставить фон кнопки меняться при наведении на нее курсора:
button {
background: white;
transition: background 0.5s linear;
}
button:hover {
background: green;
}
Обратите внимание на свойство transition в первом указателе на button. Оно говорит браузеру применять переход при любом изменении состояния, например, при наведении курсора, а также при возврате из состояния наведения.
Если бы мы применили свойство transition только к состоянию hover, то переход осуществлялся бы только при наведении курсора на кнопку, но не обратно.
Давайте посмотрим, как это выглядит в действии. Я создал несколько демонстрационных примеров. Возможно, вы столкнётесь с тем, что эти примеры содержат не совсем очевидный код. В ближайшее время я расскажу об этом подробнее, но не стесняйтесь пошарить в значениях и посмотреть, что из этого получится.
Пример: Переход при наведении на кнопку
Эффект наведения на кнопку (https://codepen.io/donovanh/pen/MYQdZd)
Вот CodePen, демонстрирующий эффект наведения. В CodePen можно вносить изменения в HTML и CSS и сразу же видеть результаты.
Главное, на что следует обратить внимание, — это любые свойства, начинающееся с transition-. Для демонстрации я записал их от руки следующим образом:
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;
Данный код указывает браузеру, какие движения следует генерировать между состоянием без наведения и состоянием при наведении. Он указывает браузеру на необходимость анимировать все свойства (цвет, размер, положение) в течение 0,4 секунды.
Попробуйте поменять некоторые из этих значений. Например, замените 0.4s на что-то более длительное, например 2s (две секунды). Как воспринимается анимация? Можно заменить свойство all на background.
Для получения забавного эффекта попробуйте изменить значение transition-timing-function с ease-out на следующее:
transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)
Функция времени cubic-bezier штука очень интересная. Более подробно мы рассмотрим функции времени позже.
Домашнее задание
Отредактируйте кнопку из примера и добавьте свои идеи. Можно попробовать изменить форму, рамку, да практически любое свойство. Развлекайтесь, цель состоит в том, чтобы убедиться, что вы знакомы с тем, как переход влияет на эффект наведения элемента.
Для вдохновения посмотрите этот замечательный стиль наведения. Если вы ищете идеи, то можете найти множество отличных примеров.
Если хотите пойти дальше, попробуйте создать новый CodePen с элементом, который при наведении меняется с одного на другой. Попробуйте сделать так, чтобы элемент внутри него двигался с другой скоростью. Не волнуйтесь, если вы ещё не дошли до этого момента, позже мы рассмотрим эти свойства более подробно.