Aby dodać animację w HTML, wykorzystuje się przede wszystkim CSS oraz JavaScript. Poniższy poradnik przeprowadzi krok po kroku przez różne techniki, prezentując praktyczne przykłady gotowe do użycia na stronie internetowej.
Animacje CSS
CSS pozwala na szybkie i wydajne tworzenie animacji bez potrzeby pisania skryptów JavaScript. Wyróżniamy dwa główne sposoby:
- Animacje oparte na przejściach (transition);
- Animacje z użyciem kluczowych klatek (@keyframes).
Przykład – pulsujący przycisk
HTML –
<button class="pulsujacy-przycisk">Kliknij mnie</button> CSS –
.pulsujacy-przycisk { background-color: #ff6347; color: #fff; padding: 15px 25px; border: none; cursor: pointer; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }Efekt: przycisk „pulsuje”, powiększając się i wracając do oryginalnego rozmiaru co 2 sekundy.
Przykład – ruch i obrót elementu
HTML –
<div class="animowany-element">Animacja</div> CSS –
.animowany-element { width: 100px; height: 100px; background-color: #00aced; animation: ruchObrot 5s infinite; } @keyframes ruchObrot { 0% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(200px) rotate(180deg); } 100% { transform: translateX(0) rotate(360deg); } }Efekt: element przesuwa się w prawo i wykonuje pełny obrót wokół własnej osi.
Animacje z użyciem JavaScript
JavaScript daje bardzo dużą kontrolę nad animacjami. Możesz dynamicznie zmieniać style, uruchamiać animacje po kliknięciu, przewinięciu strony lub w odpowiedzi na inne zdarzenia.
Podstawowy przykład animowania elementu za pomocą Web Animations API
HTML –
<div class="element" style="width:100px; height:100px; background:dodgerblue;"></div>
<button onclick="startAnim()">Animuj</button> JavaScript –
function startAnim() { const element = document.querySelector('.element'); const keyframes = [ { transform: 'rotate(0deg)', background: 'gold' }, { background: 'dodgerblue', borderRadius: '10px', transform: 'rotate(360deg)' } ]; const options = { iterations: 2, duration: 1000, fill: "forwards", direction: "alternate", easing: "ease-in-out" }; element.animate(keyframes, options); }Efekt: po kliknięciu w przycisk, kwadratowy element obraca się i zmienia kolor dwa razy.
Inne zastosowania animacji na stronie WWW
- Animowane karty produktów lub usług – efekt „hover” na podglądzie produktu poprawia UX oraz przyciąga uwagę użytkownika;
- Animowane logo – przy ładowaniu strony lub najechaniu myszką element logo może się obracać, zmieniać kolory lub rozjaśniać;
- Wizualizacja postępu (np. pasek ładowania) – płynnie przesuwający się pasek pokazuje postęp załadowania aplikacji lub strony;
- Dynamiczne menu – efekt wysuwania, przesuwania lub rozkładania przy przewijaniu;
- Wprowadzenie tekstów lub grafik – elementy pojawiają się, przesuwają lub zanikają podczas przewijania strony.
Najlepsze praktyki przy dodawaniu animacji HTML
- Używaj animacji umiarkowanie — zbyt wiele efektów rozprasza użytkownika i spowalnia stronę,
- Zapewnij dostępność — niektóre animacje mogą być niekomfortowe dla osób wrażliwych na ruch (media queries prefers-reduced-motion),
- Testuj animacje na różnych urządzeniach — upewnij się, że efekty płynnie działają na smartfonach i komputerach,
- Unikaj ciężkich animacji w JavaScript — jeśli możesz, wybieraj CSS, bo jest szybszy i mniej obciąża procesor.
Podsumowanie
Dodanie animacji do elementów HTML jest obecnie proste dzięki CSS i JavaScript. Animacje można wdrażać na elementach przy użyciu gotowych struktur (CSS keyframes, transitions) lub programistycznie (Web Animations API, biblioteki JS), co pozwala na ogromną kreatywność w projektowaniu nowoczesnych, przyjaznych i interaktywnych stron internetowych.
