transition-timing-function - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti transition-timing-function nastavujeme rychlostní křivku přechodného efektu. Můžeme si také vytvořit svojí vlastní.

Hodnoty

ease (výchozí) - Přechodný efekt začíná pomalu, poté zrychlí a ke konci je pomalejší.
ease-in - Efekt má pomalý začátek a rychlý konec.
ease-out - Efekt má rychlý začátek a pomalý konec.
ease-in-out - Efekt nabývá obou předešlých hodnot - má pomalý začátek a pomalý konec.
linear - Přechodný efekt má celou dobu stejnou rychlost.
cubic-bezier(číslo, číslo, číslo, číslo) - Vlastní nastavení rychlostní křivky přechodného efektu. Hodnota číslo musí nabývat hodnoty 0-1. Můžeme využít na vytváření tento nástroj.

Ukázka

Vytvořme si div představující černý kruh o rozměrech 200px × 200px s přechodným efektem trvající 1 sekundu. Tento efekt bude po najetí na element vytvářet z kruhu čtverec.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 200px;
                        height: 200px;
                        border-radius: 50%;
                        background-color: black;
                        transition-duration: 1s;
                        -webkit-transition-duration: 1s;            /* Chrome, Safari */
                        -moz-transition-duration: 1s;               /* Mozilla Firefox */
                        transition-timing-function: linear;
                        -webkit-transition-timing-function: linear; /* Chrome, Safari */
                        -moz-transition-timing-function: linear;    /* Mozilla Firefox */
                }
                div:hover
                {
                        border-radius: 0;
                }
                </style>
                <title>transition-timing-function</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Vlastnost transition-timing-function v CSS 3 - Ostatní CSS vlastnosti

Minulý zápis si však můžeme zkrátit hlavní vlastností přechodného efektu - transition. Abychom však mohli zápis zkrátit, musíme nejdříve definovat následující atributy:

transition-property - Co se bude měnit
transition-duration - Délka efektu

transition: all 1s linear;
-webkit-transition: all 1s linear;  /* Chrome, Safari */
-moz-transition: all 1s linear;     /* Mozilla Firefox */

Č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.

Aktivity

Nejčastěji vyhledáváné

transition-timing-function - Český CSS 3 manuál

Hodnoty

Ukázka