Vlastnost přechodu CSS
Příklad
Umístěním ukazatele myši na prvek <div> postupně změňte šířku ze 100 pixelů na 300 pixelů:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost transition
je zkrácená vlastnost pro:
Poznámka: Vždy zadejte vlastnost transition-duration , jinak je trvání 0 s a přechod nebude mít žádný účinek.
Výchozí hodnota: | všechny 0s lehkost 0s |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.transition="všechny 2" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Syntaxe CSS
transition: property duration timing-function delay|initial|inherit;
Hodnoty vlastností
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Když se <input type="text"> zaostří, postupně změňte šířku ze 100 pixelů na 250 pixelů:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Související stránky
CSS tutoriál: CSS Transitions
Odkaz HTML DOM: vlastnost přechodu