Przejścia animowane w CSS3

Przejścia

Właściwość transition-property (właściwość CSS)
transition-property:
none;	single-transition-property [ ‘,’ single-transition-property ]*
none	transition-property: all;	np. transition-property: background;

single-transition-property = all | IDENT

Właściwość transition-duration (czas trwania przejścia)
transition-duration:
time [, time]*
np. transition-duration: 2s;

Właściwość transition-timing-function (chronometraż)
transition-timing-function:
single-transition-timing-function [ ‘,’ single-transition-timing-function ]*
np. transition-timing-function: ease-in-out;

single-transition-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ści przejść

single-transition-timing-function
Funkcja	Opis	Przykład
ease	wolno-szybko-wolno cubic-bezier(0.25,0.1,0.25,1)	Lorem
linear	stała szybkość cubic-bezier(0, 0, 1, 1)	Lorem
ease-in	wolno-normalnie cubic-bezier(0.42,0,1,1))	Lorem
ease-out	normalnie-wolno cubic-bezier(0,0,0.58,1)	Lorem
ease-in-out	wolno-normalnie-wolno cubic-bezier(0.42,0,0.58,1)	Lorem
step-start	pominięcie pierwszej klatki steps(1, start)	Lorem
step-end	pominięcie ostatniej klatki steps(1, end)	Lorem
steps(integer[, [ s\| e ] ]?)	ilość klatek animacji s - start, e - end	Lorem
cubic-bezier(n1, n2, n3, n4)	zdefiniowane wartości n1, n2, n3, n4 z przedziału [0-1]	Lorem

Właściwość transition-delay (opóźnienie startu przejścia)
transition-delay:
time [, time]*
np. transition-delay: 2s;

Właściwości przejść

Właściwość transition (przejścia)
transition:
single-transition [ ‘,’ <single-transition> ]*
np. transition: background 2s;
np. transition: background linear 2s;	np. transition: background 1s linear;	np. transition: background 1s 2s;
np. transition: background 1s linear 2s;
np. transition: color 1s linear 2s, background 1s linear 2s;

single-transition = [ none | single-transition-property ] || time || single-transition-timing-function || time

Typy animacji

Typy animacji

Typy animacji
Wartość	Interpolacja
color	czerwony, zielony, niebieski i alfa
length	liczby rzeczywiste
percentage	liczby rzeczywiste
length, percentage, calc	liczby rzeczywiste
integer	skokowo (liczby całkowite)
font weight	skokowo (wielokrotność 100)
number	liczby (zmiennoprzecinkowe)
rectangle	x, y, szerokość i wysokość (liczby)
visibility	Widoczność (wartości visible\|hidden)
shadow list	lista właściwości cienia: kolor, położenie X, Y, rozmycie
gradient	pozycje i kolory każdej zmiany (wypełnienia muszą być tego samego typu i posiadać tyle samo kolorów zmiany)
paint server (SVG)	interpolacja jest obsługiwana tylko: od gradientu do gradientu i od koloru do koloru (z zasadami j.w.)
simple list	prosta lista różnych typów
repeatable list	powtarzana lista różnych typów

Typy animacji

[ransitions CSS3]: CSS Transitions, W3C Working Draft 19 November 2013,
URL: http://www.w3.org/TR/css3-transitions