Kurs języka HTML i CSS

Tematy: animation | @keyframes | animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state

Aby zdefiniować ramki, należy wpisać w definicji stylu @keyframes nazwa rozkład;.

Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-.

Jak powiedzieliśmy wcześniej, animacja składa się z dwóch bloków kodu:

• Pierwszy blok zawiera definicję samej animacji przypisanej do obiektu, określając jej nazwę, czas trwania, rozkład czasowy, opóźnienie startu, liczbę powtórzeń i kierunek. Dane te mogą zostać podane zbiorczo jako wartości parametrów animation lub też w osobnych wierszach, za pomocą bardziej szczegółowych poleceń, które opisują tutaj kolejne strony.
• Drugi blok, czyli @keyframes, zawiera selektory poszczególnych klatek animacji obiektu oraz przypisane poszczególnym klatkom style.

Dopiero obie części powodują, że uzyskujemy ruch na ekranie.

Przykładowa definicja:

1. Definicja obiektu i animacji

div.pojemnik
{
width:100px;
height:50px;
background-color:gainsboro;
animation: pulsowanie 3s infinite alternate;
-webkit-animation: pulsowanie 3s infinite alternate;
}

2. Definicja klatek

@keyframes pulsowanie
{
from {width:100px;}
to {width:300px;}
}
@-webkit-keyframes pulsowanie
{
from {width:100px;}
to {width:300px;}
}

Po wprowadzenia pojemnika wyróżnionego tu klasą "pojemnik" uzyskamy efekt animacji - pulsowanie pojemnika między szerokością początkową 100 pikseli i końcową 300 pikseli, trwające 3 sekundy w jednym przebiegu, w nieskończoność, w obie strony:

Możemy również zastosować bardziej rozbudowany podział z selektorami procentowymi, np.:

1. Definicja obiektu i animacji

div.pojemnik2
{
width:50px;
height:50px;
position:relative;
background-color:gainsboro;
animation: przechodzenie 5s ease infinite alternate;
-webkit-animation: przechodzenie 5s ease infinite alternate;
}

2. Definicja klatek

@keyframes przechodzenie
{
0% {left:0px;}
20% {left:50px; background-color:green;}
40% {left:100px; background-color:red;}
60% {left:150px; background-color:blue;}
80% {left:200px; background-color:yellow;}
100% {left:250px; background-color:brown;}
}
@-webkit-keyframes przechodzenie
{
0% {left:0px;}
20% {left:50px; background-color:green;}
40% {left:100px; background-color:red;}
60% {left:150px; background-color:blue;}
80% {left:200px; background-color:yellow;}
100% {left:250px; background-color:brown;}
}

W efekcie uzyskamy:

Ważne: rozkład czasowy (linear, ease itd.) w podziale animacji na klatki dotyczy ruchu od klatki do klatki.

Interpretacja: Chrome i Safari (z prefiksem).