Вы когда-нибудь замечали, что одни сайты в интернете выглядят статичными, почти как страница в книге, а другие — "живые" и интерактивные? Элементы на них плавно появляются, кнопки отзываются на наведение мыши, а иконки привлекают внимание легким движением.
С их помощью вы можете:
- Сделать кнопки, которые плавно меняют цвет или размер при наведении.
- Добавить блокам с контентом эффект плавного появления на экране.
- Создать иконки, которые привлекают внимание пользователя.
/* transition: [что меняем] [как долго] [характер] [задержка]; */
.element {
transition: background-color 0.5s ease-in-out 0.1s;
}Важный совет: Если вам нужно задать разную длительность для разных свойств, просто перечислите их через запятую: transition: background-color 1s, transform 0.5s;
<button class="animated-btn">
Наведи на меня!
</button>/* Стили для самой кнопки в обычном состоянии */
.animated-btn {
background-color: #3498db; /* Синий фон */
color: white; /* Белый текст */
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer; /* Меняем курсор на "руку" */
/* * ВОТ ГЛАВНАЯ СТРОКА!
* Мы говорим: "Следи за ИЗМЕНЕНИЕМ фона и свойства transform.
* Если они изменятся, сделай это плавно за 0.3 секунды"
*/
transition: background-color 0.3s ease, transform 0.3s ease; /* [cite: 61] */
}
/* Стили для кнопки, КОГДА на нее навели мышь */
.animated-btn:hover {
background-color: #2980b9; /* Делаем фон темнее */
/* * Увеличиваем кнопку на 10%
* transform — это свойство для трансформаций:
* поворота, сдвига и масштабирования.
*/
transform: scale(1.1); /* [cite: 62] */
}Процесс состоит из двух шагов:
- Создать "сценарий" с помощью правила @keyframes.
- Назначить этот сценарий элементу с помощью свойства animation.
@keyframes slide-in {
from {
transform: translateX(-100px); /* Начать слева за экраном */
}
to {
transform: translateX(0); /* Закончить в своей позиции */
}
}@keyframes pulse {
0% {
transform: scale(1); /* Исходный размер */
}
50% {
transform: scale(1.1); /* Немного увеличиться */
}
100% {
transform: scale(1); /* Вернуться в исходный размер */
}
}/* animation: [имя] [длительность] [характер] [задержка] [повторы] [направление]; */
.my-element {
animation: pulse 2s ease-in-out 0s infinite alternate;
}<div class="breathing-icon">
🚀
</div>/* 1. Сам "рецепт" анимации */
@keyframes pulse {
/* В начале (0%) и в конце (100%)
анимации элемент в исходном размере */
0%, 100% {
transform: scale(1);
opacity: 1;
}
/* В середине анимации (50%)
он будет на 15% больше и чуть прозрачнее */
50% {
transform: scale(1.15);
opacity: 0.8;
}
}
/* 2. Стили для иконки и "запуск" анимации */
.breathing-icon {
font-size: 50px; /* Просто чтобы иконка была большой */
/* * А ВОТ И ЗАПУСК!
* Имя: pulse
* Длительность: 2 секунды на 1 цикл
* Характер: ease-in-out (плавное начало и конец)
* Повторы: infinite (бесконечно)
*/
animation: pulse 2s ease-in-out infinite; /* */
}