Animacje sprawiają, że strona jest dynamiczna dla użytkowników. Wiele osób uważa, że do tego konieczny jest JavaScript, ale nowoczesny CSS pozwala tworzyć złożone efekty bez ani jednej linijki kodu w JS. Użycie animacji CSS przyspiesza ładowanie strony i zmniejsza obciążenie przeglądarki, ponieważ są one przyspieszane sprzętowo.
Podstawy CSS-animacji
Aby stworzyć animację, należy zdefiniować kluczowe klatki za pomocą @keyframes. Na przykład, zróbmy płynne zmienianie koloru przycisku:
@keyframes changeColor {
0% { background-color: #3498db; }
100% { background-color: #2ecc71; }
}
button {
animation: changeColor 2s infinite alternate;
}
Ten kod sprawia, że przycisk zmienia kolor co 2 sekundy. Animacja działa nieprzerwanie dzięki infinite, a alternate sprawia, że zmienia kierunek przy każdym powtórzeniu.
Animacja ruchu obiektów
Jednym z najpopularniejszych efektów jest płynne przesuwanie elementu. Na przykład, zróbmy blok, który porusza się w lewo i prawo:
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.moving-block {
animation: move 3s infinite;
}
Ten efekt można zastosować do różnych elementów, aby nadać stronie dynamiki.
CSS transition: płynne zmiany stylów
Jeśli trzeba animować zmianę właściwości bez @keyframes, można użyć transition. Na przykład, zróbmy efekt najechania kursora na przycisk:
button {
background-color: #3498db;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #2ecc71;
}
To podejście pozwala na uczynienie zmiany koloru bardziej przyjemną bez szarpania.
Połączenie efektów
Aby uzyskać bardziej złożone efekty, można łączyć @keyframes i transition. Na przykład, stwórzmy efekt „pulsacji”:
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.pulsing-button {
animation: pulse 1.5s infinite;
}
W ten sposób animacje CSS pozwalają tworzyć dynamiczne i płynne efekty bez konieczności używania JavaScript.
```