Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Transitions (přechody) - Český CSS3 manuál

HTML a CSS Manuál Ostatní vlastnosti Transitions (přechody) - Český CSS3 manuál

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Za pomocí CSS3 můžete snadno obohatit změnu elementu bez potřeby Flashe či JavaScriptu.

Použití je snadné: zadáme, které vlastnosti má být efekt přiřazen a zvolíme mu dobu průběhu. Pozn: Výchozí hodnota délky efektu je nulová, pokud ji tedy nezadáme efekt se neprojeví.

Například:

div
{
        transition: width 2s;
        -moz-transition: width 2s; /* Firefox 4 */
        -webkit-transition: width 2s; /* Safari and Chrome */
        -o-transition: width 2s; /* Opera */
}

Nyní jsme určili, že změna šířky divu bude probvázena plynule po dobu 2 sekund. Nejčastěji se nám to hodí při najetí na daný element. Přidáme tedy změnu šířky:

div:hover
{
        width:300px;
}
 

Pokud chcete změn více, jednoduše je oddělte čárkou :)

div
{
        transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, -moz-transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        -o-transition: width 2s, height 2s,-o-transform 2s;
}
Jsem čtvereček co má rád myšku uvnitř :P

Nastavit si dále můžeme dobu čekání na start efektu a způsob výpočtu rychlosti efektu (ze začátku pomalejší a ke konci rychlejší nebo naopak, či normální po celou dobu).

Příkladné nastavení:

div
{
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;
}

A to samé nastavené v jednom řádku:

div
{
        transition: width 1s linear 2s;
}

Možnosti pro transition-timing-function

  • linear -> stejná rychlost od začátku až ke konci (cubic-bezier(0,0,1,1))
  • ease -> pomalejší start, ve prostřed zrychlení a ke konci dojede opět pomaleji (cubic-bezier(0.25, 0.1, 0.25, 1))
  • ease-in -> pomalejší start (cubic-bezier(0.42,0,1,1))
  • ease-out -> pomalejší konec (cubic-bezier(0,0,0.58,1))
  • ease-in-out - pomalejší start a konec (cubic-bezier(0.42,0,0­.58,1))
  • cubic-bezier(n,n,n,n) - umožňuje navolit si vlastní rychlost efektu hodnota n je od 0 do 1

 

 

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Avatar
Samik11
Redaktor
Avatar
Samik11:9.4.2013 22:27

Tak tohle je paráda :-)

Odpovědět 9.4.2013 22:27
„Radost vidět a rozumět, to je nejkrásnější dar přírody.“ Albert Einstein
Avatar
j.martenek
Člen
Avatar
j.martenek:11.8.2013 19:49

Dá se nějak udělat, aby při najetí myši na element č. 1 se nějak změnil element č. 2?

 
Odpovědět 11.8.2013 19:49
Avatar
Odpovídá na j.martenek
Michal Žůrek (misaz):11.8.2013 19:52

dá a máš hned 2 možnosti.
1.) druhý element musí být vnořený do prvního

<div id="e1">
    <div id="e2">

2.) javascriptem

Odpovědět  +1 11.8.2013 19:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
j.martenek
Člen
Avatar
j.martenek:17.8.2013 18:31

Pro mě bude lepší ta první možnost. Javascript ještě moc neovládám.

 
Odpovědět 17.8.2013 18:31
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na j.martenek
Honza Bittner:17.8.2013 18:44

nauč se jQuery, je to jednodušší :)

Odpovědět  -1 17.8.2013 18:44
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Jan Swiatkowski:6.3.2016 14:07

Tak tohle je paráda!! :-D (hledal jsem to celý týden :-) )

Odpovědět 6.3.2016 14:07
V jednoduchosti je krása...
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.

Zobrazeno 6 zpráv z 6.