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

HTML a CSS Manuál Ostatní vlastnosti 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

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:

  1. transition-property - Co se bude měnit
  2. transition-duration - Délka efektu
transition: all 1s linear;
-webkit-transition: all 1s linear;      /* Chrome, Safari */
-moz-transition: all 1s linear;         /* Mozilla Firefox */

 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!