Признавайтесь, было у вас так: заходишь на сайт, а там всё статично, скучно и мёртво, как тренажёрный зал в 6 утра без музыки? 😅 Глазам зацепиться не за что, внимание уходит, пользователь закрывает вкладку.
Вот тут и вступает на сцену анимация. Но не та, где всё мигает как новогодняя ёлка (это перебор), а та, что помогает глазам скользить по контенту и добавляет сайту энергии. 🚀
1. С чего начать
Как и в спорте, перед тяжёлыми подходами нужна разминка. В вебе — это базовые CSS-анимации. Например, плавное появление блока:
.fade-in {
opacity: 0;
animation: fadeIn 1.5s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
Повесил на элемент — и он красиво "выплывает".
2. Делаем сайт «живым»
Хочешь, чтобы кнопка реагировала на наведение, как бицуха на пампинге? Используй transform и transition:
.button {
transition: transform 0.2s ease;
}
.button:hover {
transform: scale(1.1);
}
Кнопка не просто стоит как столб — она откликается на внимание.
3. Когда CSS мало — подключаем «тяжёлую артиллерию»
JS-библиотеки дают гибкость. Например:
- GSAP — настоящий штангист среди анимаций, работает быстро и мощно.
- AOS (Animate On Scroll) — добавляет движения при скролле без лишнего кода.
- Lottie — для сложных SVG-анимаций, весит мало, а выглядит круто.
Пример с GSAP:
<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
<script>
gsap.to(".box", { x: 300, duration: 2, rotation: 360 });
</script>
Блок поехал в сторону и сделал оборот — прямо как я на штанге, когда впервые взялся за «вес». 😅
4. Лайфхаки от меня
- 🚦 Не перегружай — как и с тренировками, перебор в анимации = перетренированность.
- 📱 Проверь адаптивность — анимация должна работать не только на десктопе.
- ⚡ Следи за производительностью — оптимизируй изображения, используй will-change для плавности.
Финал:
Анимация — это как добавка к спортивному питанию: в нужной дозе даёт прирост, в переборе превращает в хаос. Делай красиво, с умом — и твой сайт будет качать внимание пользователей так же, как мы качаем грудные и спину в зале. 💪
Подписывайся, ставь лайк и пиши в комментах — используешь ли ты анимацию на своих проектах или ещё «тягаешь пустой гриф»? 😉