Přechody
CSS přechody umožňují plynulé změny vlastností prvku, například barvy, velikosti nebo pozice. Přechody se provádí pomocí CSS vlastnosti transition
. Přechody se provádí mezi dvěma stavy prvku, například při najetí myši nebo změně třídy.
.sipka {
transition: transform 1s;
}
.sipka:hover {
transform: rotate(180deg);
}
Podvlastnosti
Vlastnost transition
sdružuje několik podvlastností podobně jako třeba vlastnost border
nebo padding
.
transition-property
určuje, které vlastnosti se mají přechodně měnit (hodnoty např.color
,transform
,opacity
).transition-duration
délka trvání přechodu (hodnoty např.0s
,0.3s
,750ms
).transition-delay
opozdí spuštění přechodu (hodnoty např.0s
,1s
,500ms
).transition-timing-function
nastavuje průběžně měnící se rychlost (hodnoty např.ease
,linear
,ease-in
,cubic-bezier(0.1, 0.7, 1, 0.1)
,steps(4, jump-start)
).
Pro pokročilé
Přechod na vše
Pomocí all
lze aplikovat přechody na všechny vlastnosti s trváním 0,3 sekundy.
.prvek {
transition: all 0.3s;
}
⚠️ Může viditelně zpomalit vykreslování přechodu, což nemusí vypadat pěkně. Vývojář se také vystavuje riziku, že omylem zanimuje i nějakou vlastnost nechtěně a kód se hůře zpětně čte, protože není tak jasný záměr kódu.
Pokud chcete přechodem animovat více vlastností, typicky třeba barvu textu a pozadí zároveň, tak může použít výčet.
.prvek {
transition-property: color, background-color;
transition-duration: 0.3s;
}
Cvičení
- Postupuj podle zadání na github.com/…/Cviceni-Dostihy.
- Oživte pomocí přechodů houpačku z předchozího cvičení, aby jedno přehoupnutí trvalo jednu sekundu.