Poznajemy właściwości animacji - animation CSS3
W poprzedniej części kursu CSS poznaliśmy do czego służy reguła @keyframes oraz dowiedzieliśmy się w jaki sposób zapisywać selektory czasu animacji, natomiast w tej części kursu przyjrzymy się bliżej właściwościom CSS, które należą do grupy animation.
Poniżej zostały ponownie wymienione oraz pokrótce opisane właściwości CSS należące do grupy animation.
- animation-name
- Właściwość ta określa nazwę animacji, którą chcemy dodać do elementu HTML.
- animation-duration
- Właściwość ta określa długość trwania animacji.
- animation-timing-function
- Właściwość ta określa tempo animacji
- animation-delay
- Właściwość ta określa opóźnienie lub przyspieszenie pierwszego startu animacji.
- animation-iteration-count
- Właściwość ta określa ilość powtórzeń animacji.
- animation-direction
- Właściwość ta określa kierunek powtarzania się oraz rozpoczęcia animacji.
- animation-fill-mode
- Właściwość ta określa dodatkowy wygląd elementu HTML przed lub po wykonaniu się animacji.
- animation-play-state
- Właściwość ta wstrzymuje bądź wznawia wykonywanie się animacji.
- animation
- Właściwość ta określa wszystkie wyżej wymienione właściwości CSS.
Aby wyżej wymienione właściwości CSS w jakikolwiek sposób oddziaływały na dany element HTML musimy pierw utworzyć jakąś przykładową animację CSS, za pomocą reguły @keyframes.
Tworzymy przykładową animację o nazwie szerokosc, której zapis został umieszczony poniżej:
@keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}Analizując zapis przedstawiony powyżej, możemy dojść do wniosku, że:
0% { width:150px; }- Na początku animacji element HTML będzie posiadał wartość szerokości równą 150 pikseli (
width:150px;), następnie... 100% { width:350px; }- ...szerokość elementu HTML będzie powoli zmieniała swoją wartość, od początku trwania animacji, do ostatniej sekundy trwania animacji. W ostatniej sekundzie trwania animacji szerokość elementu HTML będzie wynosić 350 pikseli (
width:350px;).
W ten sposób utworzoną animację szerokosc dodajemy do elementu HTML, za pomocą właściwości animation-name:szerokosc; Następnie określamy dla niej dodatkowe cechy wyglądu, dzięki właściwości animation-duration:5s; oraz animation-iteration-count:infinite;
W rezultacie otrzymujemy następujący efekt:
Kod dokumentu HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
text-align:center;
padding:15px 0;
border:3px solid #FDD700;
animation-name:szerokosc;
animation-duration:5s;
animation-iteration-count:infinite;
-webkit-animation-name:szerokosc;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
}
/* ------------ANIMACJA-SZEROKOSC------------ */
@keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
@-webkit-keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
</style>
</head>
<body>
<div>animowany - div</div>
</body>
</html>
Do naszego przykładowego elementu div, dzięki właściwości animation-name oraz wartości szerokosc, została dodana animacja szerokosc, którą utworzyliśmy za pomocą reguły @keyframes.
Domyślnie animacja CSS trwa zero sekund, czyli w ogóle nie rozpoczyna się, lecz nasza animacja szerokosc trwa pięć sekund, ponieważ do danego elementu div została dodana właściwość animation-duration wraz z wartością 5s.
Domyślnie animacja CSS wykonuje się tylko raz, lecz nasza animacja szerokosc wykonuje się nieskończoną ilość razy, za co jest odpowiedzialna właściwość animation-iteration-count oraz wartość infinite.
Gdy dodamy właściwość animation-delay wraz z wartością 3s, do naszego przykładowego elementu div, to nasza animacja będzie miała trzy sekundowe opóźnienie, jednak tylko przy jej pierwszym starcie (odśwież tę stronę, aby zobaczyć wspomniane opóźnienie).
Rezultat:
Oprócz wspomnianego trzy sekundowego opóźnienia animacji, przy jej pierwszym rozpoczęciu, zobaczyliśmy jeszcze jeden dodatkowy efekt, który pojawił się, gdy dodaliśmy właściwość animation-delay wraz z wartością 3s, do naszego przykładowego elementu div. Tym efektem jest to, że wygląd elementu div, w czasie gdy jego animacja jest opóźniona, jest taki, jaki został określony przez nas w regule CSS, która została utworzona za pomocą selektora div, a nie jest taki, jaki został określony w pierwszym selektorze czasu animacji (0%), w regule @keyframes.
Wspomnianą sytuację możemy zmienić, gdy dodamy, do naszego przykładowego elementu div, właściwość animation-fill-mode wraz z wartością backwards.
Rezultat:
Inny interesujący efekt uzyskamy, gdy do naszego przykładowego elementu div dodamy właściwość animation-delay, lecz tym razem z ujemną wartością, np. -2s.
Rezultat:
Tym razem nasza animacja szerokosc nie została opóźniona, za pomocą właściwości animation-delay, lecz została przyspieszona o dwie sekundy, tzn. swój wygląd (na początku) ma taki, jak w drugiej sekundzie (efekt widoczny tylko przy pierwszym uruchomieniu animacji).
Jeżeli chodzi o tempo animacji, to możemy kontrolować je, za pomocą właściwości animation-timing-function. Jedną z wartości, jaką możemy podać wraz z właściwością animation-timing-function, jest wartość linear, która sprawia, że dana animacja ma stałe tempo.
Rezultat:
Dla porównania, animacja szerokosc, która została umieszczona poniżej, ma domyślne tempo.
Kolejny ciekawy efekt uzyskamy, gdy do naszej powtarzającej się animacji szerokosc dodamy właściwość animation-direction wraz z wartością alternate, dzięki czemu dana animacja będzie powtarzać się zawsze w odwrotnym kierunku.
Rezultat:
Ponadto, do jednego elementu HTML możemy dodać jednocześnie kilka animacji CSS i wcale nie musimy tworzyć dodatkowych reguł CSS.
Możemy skorzystać z następującego zapisu:
div {
text-align:center;
padding:15px 0;
border:3px solid #FDD700;
animation-name:szerokosc, tlo;
animation-duration:5s, 500ms;
animation-timing-function:ease-in-out, linear;
animation-delay:0s, 5s;
animation-iteration-count:infinite, infinite;
animation-direction:alternate, normal;
animation-fill-mode:backwards, forwards;
}
Jak widzimy w zapisie, który został zaprezentowany powyżej, każde wartości, jakie ma mieć kolejna animacja CSS, oddzielamy od siebie przecinkiem.
Możemy skrócić nasz zapis, za pomocą właściwości animation (wszystkie wartości, należące do jednej animacji, oddzielamy spacją, a kolejną grupę takich wartości, oddzielamy przecinkiem).
div {
text-align:center;
padding:15px 0;
border:3px solid #FDD700;
animation:szerokosc 5s ease-in-out 0s infinite alternate backwards,
tlo 500ms linear 5s infinite normal forwards;
}Rezultat:
Kod HTML ostatniego przykładu został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
text-align:center;
padding:15px 0;
border:3px solid #FDD700;
animation:szerokosc 5s ease-in-out 0s infinite alternate backwards,
tlo 500ms linear 5s infinite normal forwards;
-webkit-animation:szerokosc 5s ease-in-out 0s infinite alternate backwards,
tlo 500ms linear 5s infinite normal forwards;
}
/* ------------ANIMACJE------------ */
@keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
@keyframes tlo
{
0% { background-color:#FFF; }
100% { background-color:#F00; }
}
@-webkit-keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
@-webkit-keyframes tlo
{
0% { background-color:#FFF; }
100% { background-color:#F00; }
}
</style>
</head>
<body>
<div>animowany - div</div>
</body>
</html>
Podczas poznawania efektu transition dowiedzieliśmy się z jakich selektorów CSS możemy skorzystać, aby "uruchomić" efekt przejścia w danym elemencie HTML. Były to następujące selektory CSS: :hover, :focus, :active, :target.
Wspomniane selektory CSS mogą również być wykorzystane do dodania animacji CSS, do elementu HTML, w nieco bardziej dynamiczny sposób.
Przykładowo, animacja przedstawiona poniżej, zostanie uruchomiona i będzie się wykonywać tylko w momencie gdy kursor naszej myszki będzie znajdował się nad danym elementem HTML, na którym aktualnie wykonuje się dana animacja. Za wspomniany efekt odpowiada reguła CSS, w której użyliśmy selektor :hover.
Kod HTML ostatniego przykładu został przedstawiony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:150px;
padding:15px 0;
text-align:center;
border:3px solid #FDD700;
}
div:hover {
animation:szerokosc 2s infinite;
-webkit-animation:szerokosc 2s infinite; /* dla Google Chrome, Safari, Opera 15+ */
}
/* ---------------------------REGUŁY-ANIMACJI--------------------------- */
@keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
@-webkit-keyframes szerokosc /* dla Google Chrome, Safari, Opera 15+ */
{
0% { width:150px; }
100% { width:350px; }
}
</style>
</head>
<body>
<div>animowany - div</div>
</body>
</html>
Oczywiście nasza ostatnia animacja przestanie się wykonywać w momencie gdy kursor naszej myszki nie będzie znajdował się już nad danym elementem HTML.
Ponadto selektor :hover oraz właściwość animation-play-state może przydać się nam, gdy będziemy chcieli, aby uruchomiona animacja została zatrzymana, gdy najdziemy kursorem myszki na dany element HTML. Efekt ten możemy zaobserwować na przykładzie, który został zaprezentowany poniżej.
Kod HTML ostatniego przykładu został przedstawiony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:150px;
padding:15px 0;
text-align:center;
border:3px solid #FDD700;
animation:szerokosc 2s infinite;
-webkit-animation:szerokosc 2s infinite; /* dla Google Chrome, Safari, Opera 15+ */
}
div:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused; /* dla Google Chrome, Safari, Opera 15+ */
}
/* ---------------------------REGUŁY-ANIMACJI--------------------------- */
@keyframes szerokosc
{
0% { width:150px; }
100% { width:350px; }
}
@-webkit-keyframes szerokosc /* dla Google Chrome, Safari, Opera 15+ */
{
0% { width:150px; }
100% { width:350px; }
}
</style>
</head>
<body>
<div>animowany - div</div>
</body>
</html>
Gdy dodajemy animację CSS3 do elementu HTML za pomocą właściwości, które do tego służą, czyli za pomocą właściwości należących do grupy animation, należy zwrócić uwagę na stopień ważności selektora.
Przykładowo gdy utworzymy jakąś regułę CSS za pomocą selektora identyfikatora, np. #styl-1 i określimy w niej wartość właściwości color, np. red, a następnie dodamy do tego samego elementu HTML animację CSS3, za pomocą selektora o niższym stopniu ważności, np. za pomocą selektora klasy .animacja_koloru, to animacja ta nie będzie mogła zmienić naszej przykładowej właściwości color:red;, ponieważ zasady określające stopień ważności selektorów nie pozwolą na wspomnianą zmianę. Sytuacja ta raczej rzadko może przytrafić się nam, ponieważ zazwyczaj określamy wygląd danego elementu HTML za pomocą jednej reguły CSS, lecz warto pamiętać o stopniu ważności selektorów.
W następnej części kursu CSS rozpoczniemy temat przekształceń w przestrzeni 2D oraz 3D.