Если вы работаете с такими веб-технологиями, как CSS, HTML и JavaScript, важно иметь базовые знания о CSS-анимации и переходах.
В этой статье мы узнаем, как сделать несколько базовых анимаций перехода с помощью CSS.
Как анимировать элемент с базовым переходом при наведении
В этом примере мы заставим непрозрачность элемента изменяться, когда пользователь наводит курсор мыши на элемент.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
.elem {
background: blueviolet;
width: 300px;
height: 150px;
}
.elem:hover {
opacity: 0.5;
}
</style>
<body>
<div class="elem"></div>
</body>
</html>Это простой переход, который может быть запущен при наведении курсора на элемент. Мы можем добавить несколько переходов, которые будут выполняться одновременно.
Давайте добавим свойство scale transform, чтобы добавить переход масштабирования к элементу.
.elem:hover {
transform: scale(1.1);
}Но переход не кажется плавным, потому что мы не определили длительность перехода и не использовали функцию синхронизации.
Если мы добавим свойство transition, это заставит элемент двигаться более плавно.
.elem {
background: blueviolet;
width: 300px;
height: 150px;
margin: 20px auto;
transition: 500ms linear;
}Давайте разберемся, как работает свойство transition:
transition: 500ms linear;
- 500ms: длительность перехода в миллисекундах
- linear: функция синхронизации
div {
transition: <property> <duration> <timing-function> <delay>;
}Мы можем добавить дополнительные опции, как показано ниже (примеры из MDN):
#delay {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}Итак, что делает этот код?
- transition-property: свойство, которое вы хотите анимировать. Это может быть любой элемент CSS, например background, height, translateY, translateX и так далее.
- transition-duration: длительность перехода
- transition-delay: задержка перед началом перехода.
Подробнее о различных вариантах использования перехода в CSS вы можете узнать здесь.
Как сделать переходы более интерактивными с помощью свойства animation и ключевых кадров
Мы можем сделать больше с переходами CSS, чтобы сделать эту анимацию более творческой и интерактивной.
Как переместить элемент с помощью ключевых кадров
Давайте рассмотрим пример, в котором элемент перемещается из точки A в точку B. Мы будем использовать translateX и translateY.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
.elem {
background: orange;
width: 300px;
height: 150px;
animation: moveToRight 2s ease-in-out;
animation-delay: 1000ms;
}
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
</style>
<body>
<div class="elem"></div>
</body>
</html>На этот раз мы использовали новые свойства, такие как animation и keyframes. Свойство animation мы использовали для определения названия и длительности анимации, а keyframes позволяет нам описать, как элемент должен двигаться.
animation: moveToRight 2s ease-in-out;
Здесь я назвал анимацию moveToRight – но вы можете использовать любое имя, которое вам нравится. Длительность – 2 с, а ease-in-out – это функция синхронизации.
Существуют и другие функции синхронизации, такие как ease-in, linear, ease-out, которые в основном делают анимацию более плавной. Подробнее о функциях синхронизации вы можете узнать здесь.
@keyframes принимает имя анимации. В данном случае это moveToRight.
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}keyframes будет выполнять анимацию в несколько этапов. В приведенном выше примере используется процент для представления диапазона или порядка переходов. Мы также можем использовать методы from и to. как показано ниже”.
@keyframes moveToRight {
from {
transform: translateX(0px);
}
to {
transform: translateX(300px);
}
}from представляет собой начальную точку или первый шаг анимации.
to – конечная точка или последний шаг выполняемой анимации.
В некоторых случаях вы можете использовать процент. Например, вы хотите добавить более двух переходов, которые будут выполняться в последовательности, как показано ниже:
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(150px);
}
100% {
transform: translateX(300px);
}
}Мы можем быть более креативными и анимировать множество свойств одновременно, как в следующем примере:
Вы можете поиграть со свойствами и техниками анимации в песочнице здесь:
С ключевыми кадрами можно делать еще много вещей. Во-первых, давайте добавим больше переходов в нашу анимацию.
Как анимировать больше свойств и включить их в переход
На этот раз мы анимируем фон, а элемент заставим двигаться по квадрату. Мы заставим анимацию длиться вечно, используя свойство infinite в качестве функции синхронизации.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
.elem {
background: orange;
width: 250px;
height: 250px;
border-radius: 10px;
animation: moveToLeft 5s linear infinite;
animation-delay: 1000ms;
}
@keyframes moveToLeft {
0% {
transform: translateX(0px);
background: linear-gradient(
to right,
#ff8177 0%,
#ff867a 0%,
#ff8c7f 21%,
#f99185 52%,
#cf556c 78%,
#b12a5b 100%
);
}
25% {
transform: translateX(400px);
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
50% {
transform: translateY(200px) translateX(400px);
background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
75% {
transform: translateX(0px) translateY(200px);
background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
100% {
transform: translateY(0px);
}
}
</style>
<body>
<div class="elem"></div>
</body>
</html>Давайте разберемся с этим. Сначала мы добавим infinite, чтобы анимация длилась вечно.
animation: moveToLeft 5s linear infinite;
Затем мы разделим анимацию на четыре шага. На каждом шаге мы будем запускать разные переходы, и вся анимация будет идти последовательно.
- Первый шаг: установите элемент по горизонтали на translateX(0px) и измените фон на градиент.
0% {
transform: translateX(0px);
background: linear-gradient(
to right,
#ff8177 0%,
#ff867a 0%,
#ff8c7f 21%,
#f99185 52%,
#cf556c 78%,
#b12a5b 100%
);
}- Вторая анимация переместит элемент слева направо и изменит цвет фона.
25% {
transform: translateX(400px);
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}- В третьей анимации элемент переместится вниз с помощью translateY и снова изменит цвет фона.
- В четвертой анимации элемент переместится обратно влево и изменит цвет фона.
- В пятой анимации элемент должен вернуться на свое первоначальное место.
Подведение итогов
В этой статье мы рассмотрели различные вещи, которые можно сделать с помощью CSS-переходов. Вы можете использовать CSS-переходы различными способами в своих приложениях для создания лучшего пользовательского опыта.
После изучения основ CSS-анимации вы можете захотеть пойти дальше и сделать более сложные вещи, требующие взаимодействия с пользователем. Для этого вы можете использовать JavaScript или любые сторонние библиотеки анимации.
Оригинал: “https://www.freecodecamp.org/news/css-transition-examples/”