Animacje w CSS3

Plansza interaktywna marzec 2015

URL:
http://www.plotkarka.eu/PI/css3-animations/
Autor:
Radosław Kowaluk

Klatki kluczowe

Reguła @keyframes nazwa - definicja klatek animacji nazwa. Minimalnie definiujemy w nawiasach {} pierwszą klatkę from lub 0% i i ostatnią to lub 100%.

Właściwość animation-name (nazwa animacji)
animation-name:
none single-animation-name [ ‘,’ single-animation-name ]*

single-animation-name = none | IDENT

Właściwość animation-duration (czas trwania animacji)
animation-duration:
time [, time]*
np. 60s
Właściwość animation-timing-function (chronometraż)
animation-timing-function:
single-timing-function [ ‘,’ single-timing-function ]*
np. ease-in-out

single-timing-function = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(integer[, [ start | end ] ]?) | cubic-bezier(number, number, number, number)

Właściwość animation-iteration-count (ilość powtórzeń)
animation-iteration-count:
single-animation-iteration-count [ ‘,’ single-animation-iteration-count ]*
number np. 10; infinite;

Właściwości przejść

Właściwość animation-direction (właściwości animacji)
animation-direction:
single-animation-direction [ ‘,’ single-animation-direction ]*
normal
reverse
alternate
alternate-reverse
Właściwość animation-play-state (zatrzymanie lub wznowianie animacji)
animation-play-state:
single-animation-play-state [ ‘,’ single-animation-play-state ]*
running
paused
Właściwość animation-delay (opóźnienie startu animacji)
animation-delay:
time [, time]*
np. 2s
Właściwość animation-fill-mode (wygląd elementu przed i po animacji)
animation-fill-mode:
single-animation-fill-mode [ ‘,’ single-animation-fill-mode ]*
none
forwards
backwards
both

Właściwości przejść

Właściwość animation (animacje)
animation:
single-animation [ ‘,’ single-animation ]*
np. test9 8s cubic-bezier(1, 1, 1, 1) 2s infinite

single-animation = single-animation-name || time || single-animation-timing-function || time || single-animation-iteration-count || single-animation-direction || single-animation-fill-mode || single-animation-play-state

Typy animacji

single-timing-function
Funkcja Opis Przykład
ease wolno-szybko-wolno
cubic-bezier(0.25,0.1,0.25,1)

CSS
linear stała szybkość
cubic-bezier(0, 0, 1, 1)

CSS
ease-in wolno-normalnie
cubic-bezier(0.42,0,1,1))

CSS
ease-out normalnie-wolno
cubic-bezier(0,0,0.58,1)

CSS
ease-in-out wolno-normalnie-wolno
cubic-bezier(0.42,0,0.58,1)

CSS
step-start pominięcie pierwszej klatki
steps(1, start)

CSS
step-end pominięcie ostatniej klatki
steps(1, end)

CSS
steps(integer[, [ s| e ] ]?) ilość klatek animacji
s - start, e - end

CSS
cubic-bezier(n1, n2, n3, n4) zdefiniowane wartości n1, n2, n3, n4
 z przedziału [0-1]

CSS

Typy animacji

[Animations CSS3]
CSS Animations, W3C Working Draft 19 February 2013,
URL: http://www.w3.org/TR/css3-animations/