IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

  1. transition-property - Co se bude měnit
  2. transition-duration - Délka efektu
  3. transition-timing-function - Způsob (a rychlost) efektu
  4. 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:

Vlastnost transition v CSS 3 - Ostatní CSS vlastnosti

 

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