transition-property: | ||
---|---|---|
none; | single-transition-property [ ‘,’ single-transition-property ]* | |
none |
transition-property: all; |
np. transition-property: background; |
single-transition-property = all | IDENT
transition-duration: |
---|
time [, time]* |
np. transition-duration: 2s; |
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)
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 |
transition-delay: |
---|
time [, time]* |
np. transition-delay: 2s; |
transition: | ||
---|---|---|
single-transition [ ‘,’ <single-transition> ]* |
||
np. transition: background 2s; |
||
np. transition: |
np. transition: |
np. transition: |
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
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 |