CSS3 wprowadziło potężne możliwości animowania elementów na stronie internetowej, pozwalając na płynne przejścia i transformacje bez konieczności używania JavaScript. Dzięki animacjom w CSS3, możemy tworzyć atrakcyjne wizualnie strony, poprawiając doświadczenia użytkownika. W tej lekcji przyjrzymy się różnym technikom animacji, włącznie z kluczowymi klatkami, przejściami oraz transformacjami, oraz zaprezentujemy przykłady ich zastosowania.
Przykład 1: Animacja z użyciem @keyframes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja z użyciem @keyframes</title>
<style>
/* Definicja animacji */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Stosowanie animacji do elementu */
.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* Nazwa animacji */
animation-duration: 4s; /* Czas trwania animacji */
}
</style>
</head>
<body>
<div class="animated-box"></div> <!-- Element animowany -->
</body>
</html>
W powyższym przykładzie, animacja @keyframes zmienia kolor tła elementu z czerwonego na żółty w czasie 4 sekund. Jest to prosty sposób na wprowadzenie dynamiki do elementów strony.
Przykład 2: Przejścia CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przejścia CSS</title>
<style>
.transition-box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, background-color 2s ease-in-out;
/* Definiuje przejście dla szerokości i koloru tła */
}
.transition-box:hover {
width: 200px; /* Zmiana szerokości */
background-color: green; /* Zmiana koloru tła */
}
</style>
</head>
<body>
<div class="transition-box"></div> <!-- Element z przejściem -->
</body>
</html>
W tym przykładzie, element rozszerza się i zmienia kolor tła, gdy użytkownik najedzie na niego kursorem. Przejście jest płynne dzięki zastosowaniu właściwości transition.
Podsumowanie
Animacje w CSS3 umożliwiają tworzenie płynnych i atrakcyjnych efektów wizualnych na stronach internetowych. Korzystając z @keyframes, możemy definiować złożone animacje, podczas gdy przejścia (transition) pozwalają na łatwe dodanie efektów do interakcji z użytkownikiem, takich jak najechanie myszką. CSS3 oferuje również transformacje (transform), które umożliwiają zmianę kształtu, rozmiaru i pozycji elementów. Dzięki tym narzędziom, deweloperzy mogą wzbogacić interfejs użytkownika, zwiększając jego atrakcyjność i użyteczność.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.