NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!

transition-property - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti transition-property nastavujeme co se bude měnit v přechodném efektu. Může se tak měnit postupně pouze něco nebo vše.

Hodnoty

  • none - Nic se nebude měnit v přechodném efektu.
  • all (výchozí) - Všechny vlastnosti se budou měnit v přechodném efektu.
  • vlastnost - Daná vlastnost se bude měnit v přechodném efektu (lze definovat více vlastností, ale musí být oddělené čárkou).

Ukázka

Pro reprezentaci této vlastnosti si vytvořme černý div o rozměrech 100px × 100px s přechodným efektem trvající 4 sekundy. V tomto přechodu se bude měnit šířka divu na 300px. Barva pozadí z černé se ihned změní na modrou, protože vlastnost background-color není definována u atributu transition-property.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: black;
                        transition-duration: 4s;
                        -webkit-transition-duration: 4s;    /* Chrome, Safari */
                        -moz-transition-duration: 4s;       /* Mozilla Firefox */
                        transition-property: width;
                        -webkit-transition-property: width; /* Chrome, Safari */
                        -moz-transition-property: width;    /* Mozilla Firefox */
                }
                div:hover
                {
                        width: 300px;
                        background-color: #3B94E0;
                }
                </style>
                <title>transition-property</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost transition-property v CSS 3 - Ostatní CSS vlastnosti

Minulý zápis si můžeme zkrátit, abychom se při více přechodných efektech neupsali. Zápis si zkrátíme do vlastnosti transition. Pro zkrácení však musíme po hodnotě atributu transition-property (ten je jako první) definovat následující atribut:

transition: width 4s;
-webkit-transition: width 4s;   /* Chrome, Safari */
-moz-transition: width 4s;  /* Mozilla Firefox */

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
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.
Aktivity