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ści | Rodzaj |
---|---|
background-color | color |
background-image | only gradients |
background-position | percentage, length |
border-bottom-color | color |
border-bottom-width | length |
border-color | color |
border-left-color | color |
border-left-width | length |
border-right-color | color |
border-right-width | length |
border-spacing | length |
border-top-color | color |
border-top-width | length |
border-width | length |
bottom | length, percentage |
color | color |
crop | rectangle |
font-size | length, percentage |
font-weight | number |
grid-* | various |
height | length, percentage |
left | length, percentage |
letter-spacing | length |
line-height | number, length, percentage |
margin-bottom | length |
margin-left | length |
margin-right | length |
margin-top | length |
max-height | length, percentage |
max-width | length, percentage |
min-height | length, percentage |
min-width | length, percentage |
opacity | number |
outline-color | color |
outline-offset | integer |
outline-width | length |
padding-bottom | length |
padding-left | length |
padding-right | length |
padding-top | length |
right | length, percentage |
text-indent | length, percentage |
text-shadow | shadow |
top | length, percentage |
vertical-align | keywords, length, percentage |
visibility | visibility |
width | length, percentage |
word-spacing | length, percentage |
z-index | integer |
zoom | number |
Kilka bibliotek ułatwiających nam życie:
css3.bradshawenterprises.com/transitions/