Статьи

CSS3 переходы

Декабрь 20, 2018

CSS3 переходыВ прошлом я писал о CSS3 трансформациях и анимациях . Еще одна новая опция в CSS3 — переходы, которые будут обсуждаться в этом посте.

Переходы

В старой сети, если вы изменили свойство в CSS, это изменение было немедленно обновлено браузером. Если вы хотите, чтобы изменение происходило в течение определенного периода времени, вам нужно использовать код JavaScript (например, с помощью функции setTimeout ) или стороннюю библиотеку, чтобы сделать это. В CSS3 эта ситуация меняется. CSS3 представил переходы, которые позволяют изменениям свойств CSS плавно происходить в течение заданного периода времени. Вам просто нужно использовать свойства перехода, и браузер сделает переход за вас.

Свойства переходов CSS3

CSS3-переходы включают в себя различные свойства для настройки перехода:

  • transition-property : имя свойства CSS, к которому применяется переход. Вы можете написать более одного свойства, если вы разделяете различные свойства запятыми.
  • transition-duration : продолжительность перехода в секундах. Значение по умолчанию для длительности равно 0, и поэтому без продолжительности переход не произойдет.
  • Функция перехода-синхронизации : функция синхронизации, описывающая скорость продолжительности и способ ее вычисления браузером. Он может получать различные функции синхронизации, такие как линейное , упрощенное , замедленное , кубическое-безье . Значением по умолчанию является легкость .
  • задержка перехода : определяет, когда начинается переход. Значение по умолчанию 0 означает, что переход начнется немедленно.
  • transition : сокращенное свойство, которое включает в себя всю предыдущую конфигурацию свойства transition. Каждое свойство отделяется запятой.

Вот пример использования перехода на изображение с img id:

#img
{
   width: 100px;
   height: 100px;
   transition: width 2s linear 1s, height 2s ease-in 1s;
   -ms-transition:width 2s linear 1s, height 2s ease-in 1s;
   -moz-transition:width 2s linear 1s, height 2s ease-in 1s;
   -webkit-transition:width 2s linear 1s, height 2s ease-in 1s;
   -o-transition:width 2s linear 1s, height 2s ease-in 1s;
}
 
#img:hover
{
   width:200px;
   height: 200px;
}

Переход произойдет при наведении курсора на изображение. Он изменит ширину и высоту изображения, используя две разные функции синхронизации (линейную и упрощенную), с задержкой в ​​одну секунду и продолжительностью в две секунды. Когда вы прекратите зависание, изображение снова вернется в прежнее состояние, используя тот же переход. Еще один интересный пример в примере кода — использование префиксов браузера. Поскольку спецификация переходов CSS3 не является рекомендацией, поставщик браузера использует свои собственные префиксы.

Объединение переходов с другими модулями CSS3

Одним из замечательных результатов всех новых модулей CSS3 является возможность комбинировать различные модули CSS для создания лучшего пользовательского опыта (UX). Например, вы можете комбинировать переходы с преобразованиями, чтобы создавать необычные анимации, такие как вращение движущегося элемента. Вот простой пример комбинации:

#img
{
   transition: transform 2s;
   -ms-transition: -ms-transform 2s;
   -moz-transition:-moz-transform 2s;
   -webkit-transition: -webkit-transform 2s;
   -o-transition:-o-transform 2s;
   transform: rotate(360deg);
   -ms-transform: rotate(360deg);   
   -moz-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
}
 
#img:hover
{
   transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   -o-transform: rotate(0deg);
}

Этот предыдущий CSS будет вращать изображение с img id при наведении на него по часовой стрелке в течение двух секунд.

Поддержка переходов CSS3

Chrome от версии 22.
Firefox от версии 15.
Из Internet Explorer 10.
Safari от версии 5.1.
Опера из версии 12.

Резюме

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

35
Share: