CSS Transitions (przejścia) i JavaScript

CSS Transitions – nie wiem jak to przetłumaczyć poprawnie na język polski, więc będę trzymał się oryginalnej wymowy.

Definicja CSS3 definiuje transitions jako możliwość zmian wartości CSS w płynny sposób, w określonym czasie. Idea jest prosta – przy pomocy transitions możemy robić to samo co wcześniej korzystając ze zmiany wartości takich jak “left” czy “top” tyle, że w bardzo płynny sposób i z wykorzystaniem akceleracji sprzętowej. Mamy dostęp do ograniczonej liczby właściwości takich jak:

Nazwa właściwościRodzaj
background-colorcolor
background-imageonly gradients
background-positionpercentage, length
border-bottom-colorcolor
border-bottom-widthlength
border-colorcolor
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength
border-top-colorcolor
border-top-widthlength
border-widthlength
bottomlength, percentage
colorcolor
croprectangle
font-sizelength, percentage
font-weightnumber
grid-*various
heightlength, percentage
leftlength, percentage
letter-spacinglength
line-heightnumber, length, percentage
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength, percentage
max-widthlength, percentage
min-heightlength, percentage
min-widthlength, percentage
opacitynumber
outline-colorcolor
outline-offsetinteger
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength, percentage
text-indentlength, percentage
text-shadowshadow
toplength, percentage
vertical-alignkeywords, length, percentage
visibilityvisibility
widthlength, percentage
word-spacinglength, percentage
z-indexinteger
zoomnumber

Kilka bibliotek ułatwiających nam życie:

css3.bradshawenterprises.com/transitions/

ricostacruz.com/jquery.transit/

daneden.github.io/animate.css/