Transitions: Как создать плавные переходы между элементами на сайте

Transitions - это механизм в CSS, который позволяет анимировать изменения в свойствах элементов при определенных событиях, таких как :hover, :focus, :active и другие. С помощью transitions можно создать плавные переходы между двумя состояниями элемента.

Синтаксис transitions:

css
transition: [property] [duration] [timing-function] [delay];

• property: свойство, для которого задается анимация.
• duration: время, за которое должна произойти анимация, выраженное в секундах или миллисекундах.
• timing-function: функция, определяющая временную функцию изменения свойства. Это может быть ease, linear, ease-in, ease-out, ease-in-out и другие.
• delay: время, после которого начнется анимация, выраженное в секундах или миллисекундах.

Например, для анимации изменений цвета фона элемента при наведении курсора можно использовать следующий код:

css
.box {
   background-color: blue;
   transition: background-color 0.5s ease-in-out;
}
.box:hover {
   background-color: red;
}

В этом примере мы добавили свойство transition к классу .box, указав, что изменения в свойстве background-color должны происходить за 0.5секунды с функцией timing-function ease-in-out. Когда пользователь наводит курсор на элемент, цвет фона изменится на красный благодаря событию :hover.

Еще один пример - анимация изменения размера элемента с помощью транзишна:

css
.box {
   width: 100px;
   height: 100px;
   background-color: blue;
   transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.box:hover {
   width: 200px;
   height: 200px;
}

Здесь мы добавили свойство transition для изменения ширины и высоты экземпляра класса .box. При наведении курсора на элемент, его размер увеличится до 200пх.

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

Кроме того, с помощью transitions можно выполнить анимацию при изменении других свойств CSS, таких как шрифт, отступы, границы и т. д. Например, можно анимировать изменение ширины границы у элемента:

css
.box {
   border: 1px solid blue;
   transition: border-width 0.5s ease-in-out;
}
.box:hover {
   border-width: 5px;
}

В этом примере мы добавили свойство transition для изменения ширины границы элемента. Когда пользователь наводит курсор на элемент, его граница увеличится до 5пх.

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

css
.box {
   width: 100px;
   height: 100px;
   background-color: blue;
   transition: transform 0.5s ease-in-out;
}
.box:hover {
   transform: rotate(45deg) scale(1.5);
}

В этом примере мы добавили свойство transition для изменения трансформации элемента. Когда пользователь наводит курсор на элемент, он поворачивается на 45 градусов и увеличивает свой размер на 50%.

Таким образом, transitions - это мощный инструмент в CSS, который позволяет создавать плавные анимации и переходы между двумя состояниями элементов сайта при помощи изменения заданных свойств.