transition - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti transition můžeme vytvářet různé přechodné efekty např. pro změnu barvy elementu.
Vlastnosti přechodného efektu
- transition-property - Co se bude měnit
- transition-duration - Délka efektu
- transition-timing-function - Způsob (a rychlost) efektu
- transition-delay - Doba před spuštěním efektu
Popis všech vlastností včetně kódů, stylů a ukázky najdete na uvedených odkazech. Více přechodných efektů se píše za sebou a jsou oddělené čárkou (viz. ukázka). Hodnoty k vlastnosti transition se píšou v uvedeném pořadí v seznamu.
Přechodné efekty se nedají dědit a podporují je nové i starší prohlížeče. U IE fungují až ve verzi 10 a novější.
Ukázka
Pro ukázku si vytvoříme dva přechodné efekty na zeleném elementu div představující kruh o rozměrech 100px × 100px. První přechodný efekt bude během 2 sekund měnit šířku ze 100px na 300px. Po roztáhnutí se změní zelená barva pozadí elementu na tmavou modrou barvu.
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border-radius: 50%; background-color: #0000AA; transition: width 2s ease 0s, background-color 2s ease 2s; -webkit-transition: width 2s ease 0s, background-color 2s ease 2s; /* Chrome, Safari */ -moz-transition: width 2s ease 0s, background-color 2s ease 2s; /* Mozilla Firefox */ } div:hover { width: 300px; background-color: green; } </style> <title>transition</title> </head> <body> <div></div> </body> </html>
Výsledek:
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.