Przejścia animowane w CSS3

Plansza interaktywna grudzień 2014

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

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