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/