CSS3 - Animacja (animation)

Animowanie elementów jest możliwe, dzięki zmianom wartości właściwości w czasie, za pomocą klatek kluczowych. Klatki kluczowe określają stan właściwości na poszczególnych etapach wykonywania animacji. Dla animacji określić można między innymi czas trwania, ilość cykli czy krzywą prędkości animacji.

Zobacz:


Przykład animacji

 
<div id="e-zoner"></div>
div#e-zoner {
   position: relative;
   top: 20px;
   left: 225px;
   width: 200px;
   height: 40px;
   background: url(e-zoner.png) no-repeat;
   animation: e-zoner 10s ease 2s infinite alternate;
   -webkit-animation: e-zoner 10s ease 2s infinite alternate;
}

@keyframes e-zoner {
   0%   {top: 20px; left: 225px; background-size: 200px 40px;}
   50%  {top: 20px; left: 225px; background-size: 200px 40px;}
   65%  {top: 5px; left: 425px;}
   100% {top: 80px; left: 0px; background-size: 0px 0px;}
}

@-webkit-keyframes e-zoner  {
   0%   {top: 20px; left: 225px; background-size: 200px 40px;}
   50%  {top: 20px; left: 225px; background-size: 200px 40px;}
   65%  {top: 5px; left: 425px;}
   100% {top: 80px; left: 0px; background-size: 0px 0px;}
}

Zbiorczy zapis właściwości animacji - animation

Nazwę animacji, czas jej trwania, krzywą prędkości, czas do rozpoczęcia, licznik odtworzeń, kierunek działania animacji, style dla nieodtwarzanej animacji oraz jej wstrzymanie lub odtwarzanie można określić w jednej zbiorczej deklaracji. Służy do tego właściwość animation.

animation: -name -duration -timing-function -delay -iteration-count -direction -fill-mode -play-state | initial | inherit

Wartości właściwości animation:

Wartość Opis
animation-name Określa nazwę animacji dla klatek kluczowych.
Wartość domyślna "none".
animation-duration Określa czas trwania animacji do końca cyklu.
Wartość domyślna "0".
animation-timing-function Określa krzywą prędkości animacji.
Wartość domyślna "ease".
animation-delay Określa po jakim czasie animacja się rozpocznie.
Wartość domyślna "0".
animation-iteration-count Określa ile razy animacja ma zostać odtworzona.
Wartość domyślna "1".
animation-direction Określa kierunek działania animacji.
Wartość domyślna "normal".
animation-fill-mode Określa, jakie style są stosowane do elementu, kiedy animacja nie jest odtwarzana.
Wartość domyślna "none".
animation-play-state Określa czy animacja jest uruchomiona czy wstrzymana.
Wartość domyślna "running".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation: e-zoner 10s ease 2s infinite alternate none running;
   -webkit-animation: e-zoner 10s ease 2s infinite alternate none running;
}
Firefox, IE10+ obsługują właściwość animation.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation.

Powyższy zapis jest równoważny z zapisem:

div {
   animation-name: e-zoner;
   animation-duration: 10s;
   animation-timing-function: ease;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-fill-mode: none;
   animation-play-state: running;
   -webkit-animation-name: e-zoner;
   -webkit-animation-duration: 10s;
   -webkit-animation-timing-function: ease;
   -webkit-animation-delay: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-fill-mode: none;
   -webkit-animation-play-state: running;
}
W zapisie zbiorczym dobrym rozwiązaniem jest pomijanie właściwości, których wartości pozostają domyślne.
Właściwość animation-play-state jest przewidziana przez specyfikację w zapisie zbiorczym, jednak nie jest dotychczas zaimplementowana w tej formie w żadnej z głównych przeglądarek. Należy ją pominąć całkowicie lub wyłączyć z zapisu zbiorczego i użyć zapisu indywidualnego.

Klatki kluczowe - @keyframes

Klatki kluczowe określają jak zmieniają się w czasie właściwości. Animacja rozpoczyna się od 0% a kończy na 100% czasu trwania. Zawsze należy określić klatkę początkową animacji dla 0% oraz klatkę końcową animacji dla 100%. Kolejne klatki umieszczane są pomiędzy klatką początkową a końcową.

@keyframes nazwa-animacji {klatka-kluczowa {deklaracja-stylu;}}

Wartości właściwości @keyframes:

Wartość Opis
nazwa-animacji Określa nazwę animacji.
klatka-kluczowa Określa procentową część czasu animacji. Zawiera się w przedziale 0-100%. Klatek kluczowych może być dowolnie wiele.
deklaracja-stylu Określa jedną lub więcej deklaracji stylu dla klatki kluczowej.

Przykład:

@keyframes e-zoner {
   0%   {top: 10px; left: 200px; background-size: 275px 55px;}
   50%  {top: 10px; left: 200px; background-size: 275px 55px;}
   65%  {top: 5px; left: 425px;}
   100% {top: 80px; left: 0px; background-size: 0px 0px;}
}

@-webkit-keyframes e-zoner  {
   0%   {top: 10px; left: 200px; background-size: 275px 55px;}
   50%  {top: 10px; left: 200px; background-size: 275px 55px;}
   65%  {top: 5px; left: 425px;}
   100% {top: 80px; left: 0px; background-size: 0px 0px;}
}
Firefox, IE10+ obsługują właściwość @keyframes.
Chrome, Opera, Safari obsługują alternatywę @-webkit-keyframes.

Nazwa animacji - animation-name

Właściwość animation-name określa nazwę animacji dla klatek kluczowych.

animation-name: nazwa | none | initial | inherit;

Wartości właściwości animation-name:

Wartość Opis
nazwa Nazwa klatek kluczowych wiązanych z selektorem. 
none Brak animacji.
Wartość domyślna.
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

W praktyce właściwość animation-name może przyjąć postać:

div {
   animation-name: e-zoner;
   -webkit-animation-name: e-zoner;
}
Firefox, IE10+ obsługują właściwość animation-name.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-name.

Długość trwania animacji - animation-duration

Właściwość animation-duration określa czas trwania animacji.

animation-duration: czas | initial | inherit;

Wartości właściwości animation-duration:

Wartość Opis
czas Czas trwania animacji określony jest w jednostkach czasu (s, ms).
Wartość domyślna "0".
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-duration: 10s;
   -webkit-animation-duration: 10s;
}
Firefox, IE10+ obsługują właściwość animation-duration.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-duration.

Krzywa prędkości animacji - animation-timing-function

Właściwość animation-timing-function określa krzywą prędkości animacji.

animation-timing-function: cubic-bezier(x, x, x, x) | linear | ease | ease-in | 
ease-out | ease-in-out | initial | inherit;

Wartości właściwości animation-timing-function:

Wartość Opis
cubic-bezier(x, x, x, x) Własna krzywa prędkości animacji z krzywej Beziera. Możliwe wartości x od 0 do 1.
linear Animacja ma tą samą prędkość od początku do końca. Równoważne
cubic-bezier(0, 0, 1, 1).
ease Animacja ma wolny początek, później przyspiesza i na końcu zwalnia. Równoważne cubic-bezier(0.25, 0.1, 0.25, 1).
Wartość domyślna.
ease-in Animacja ma wolny początek. Równoważne cubic-bezier(0.42, 0, 1, 1).
ease-out Animacja ma wolny koniec. Równoważne cubic-bezier(0, 0, 0.58, 1).
ease-in-out Animacja ma wolny początek i wolny koniec. Równoważne cubic-bezier(0.42, 0, 0.58, 1).
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-timing-function: ease;
   -webkit-animation-timing-function: ease;
}
Firefox, IE10+ obsługują właściwość animation-timing-function.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-timing-function.

Czas do rozpoczęcia animacji - animation-delay

Właściwość animation-delay określa czas do rozpoczęcia animacji po załadowaniu dokumentu.

animation-delay: czas | initial | inherit;

Wartości właściwości transition-delay:

Wartość Opis
czas Czas do rozpoczęcia animacji określany jest w jednostkach czasu (s, ms). Na przykład 2s.
Wartość domyślna "0".
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-delay: 2s;
   -webkit-animation-delay: 2s;
}
Firefox, IE10+ obsługują właściwość animation-delay.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-delay.

Ilość powtórzeń animacji - animation-iteration-count

Właściwość animation-iteration-count określa ilość powtórzeń (cykli) animacji.

animation-iteration-count: liczba | infinite | initial | inherit;

Wartości właściwości animation-iteration-count:

Wartość Opis
liczba Liczba określająca ilość powtórzeń animacji.
Wartość domyślna "1".
infinite Animacja powinna być odtwarzana bez końca.
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}
Firefox, IE10+ obsługują właściwość animation-iteration-count.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-iteration-count.

Kierunek odtwarzania animacji - animation-direction

Właściwość animation-direction określa, czy w następujących po sobie cyklach, animacja powinna być odtwarzana normalnie, odwrotnie, czy na przemian normalnie i odwrotnie.

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Wartości właściwości animation-direction:

Wartość Opis
normal Animacja jest odtwarzana normalnie.
Wartość domyślna.
reverse Animacja jest odtwarzana odwrotnie.
alternate Animacja jest odtwarzana na przemian. Normalnie w cyklach nieparzystych (1, 2, 3, itd.) i odwrotnie w cyklach parzystych (2, 4, 6, itd.).
alternate-reverse Animacja jest odtwarzana na przemian. Odwrotnie w cyklach nieparzystych (1, 2, 3, itd.) i normalnie w cyklach parzystych (2, 4, 6, itd.).
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-direction: alternate;
   -webkit-animation-direction: alternate;
}
Firefox, IE10+ obsługują właściwość animation-direction.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-direction.

Style dla nieodtwarzanej animacji - animation-fill-mode

Właściwość animation-fill-mode określa, które style mają być użyte dla elementu, gdy animacja nie jest odtwarzana.

animation-fill-mode: none | forwards | backwards | both |initial | inherit;

Wartości właściwości animation-fill-mode:

Wartość Opis
none Żadne style animacji nie będą stosowane do elementu, przed lub po jej wykonaniu.
Wartość domyślna. 
forwards Po zakończeniu odtwarzania do elementu będą stosowane wartości właściwości ustawione dla końca animacji.
backwards Przed początkiem odtwarzania do elementu zastosowane będą wartości właściwości ustawione dla pierwszej klatki kluczowej animacji. Pierwsza klatka jest zależna od wartości "normal", "alternate", "reverse" lub "alternate-reverse" właściwości animation-direction.
both Przed początkiem odtwarzania zastosowane zostaną wartości właściwości pierwszej klatki kluczowej animacji, a po zakończeniu odtwarzania wartości właściwości ostatniej klatki kluczowej.
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}
Firefox, IE10+ obsługują właściwość animation-fill-mode.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-fill-mode.

Uruchomienie lub wstrzymanie animacji - animation-play-state

Właściwość animation-play-state określa czy animacja jest uruchomiona, czy wstrzymana.

animation-play-state: paused | running | initial | inherit;

Wartości właściwości animation-play-state:

Wartość Opis
paused Animacja jest wstrzymana.
running Animacja jest uruchomiona.
Wartość domyślna.
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

div {
   animation-play-state: forwards;
   -webkit-animation-play-state: forwards;
}
Firefox, IE10+ obsługują właściwość animation-play-state.
Chrome, Opera, Safari obsługują alternatywę -webkit-animation-play-state.

Właściwości animacji

Właściwość Opis CSS
@keyframes Określa klatki kluczowe. 3
animation Zbiorczy zapis właściwości animacji.
Wartość domyślna "none 0 ease 0 1 normal none running".
3
animation-delay Określa po jakim czasie animacja sie rozpocznie.
Wartość domyślna "0".
3
animation-direction Określa kierunek działania animacji w cyklach.
Wartość domyślna "normal".
3
animation-duration Określa czas trwania animacji do końca cyklu.
Wartość domyślna "0".
3
animation-fill-mode Określa jakie style są stosowane do elementu, gdy animacja nie jest odtwarzana.
Wartość domyślna "none".
3
animation-iteration-count Określa ile razy animacja ma zostać odtworzona.
Wartość domyślna "1".
3
animation-name Określa nazwę animacji dla klatek kluczowych.
Wartość domyślna "none".
3
animation-play-state Określa czy animacja jest uruchomiona czy wstrzymana.
Wartość domyślna "running".
3
animation-timing-function Określa krzywą prędkości animacji.
Wartość domyślna "ease".
3