Kouzlo jménem “TRANSITION”

Příklad

Vytvoříme si klasický “nudný” odkaz v HTML, který nastylujeme jako barevné tlačítko se zakulaceným okrajem, co po najetí zčervená.

Ukázka HTML, výsledného tlačítka i CSS je zde:

<div style="margin: 10px 0 30px 0">
    <a class="custom-button" href="">Tlačítko</a>
</div>

/* zakladni CSS */

.custom-button{
    letter-spacing: 1px;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none; 
    color: #ffffff; 
    background-color: #8446ab;
    border-width: 1px; 
    border-color: #8446AB; 
    border-radius: 6px;
    padding: 0.3em 1em;	
    margin: 10px 0 20px 0
}

.custom-button:hover{
    color: #ffffff;
    background-color: #ff014f;
    border-color: #ff014f;
}

Každá transition (přechod) se dá zapsat pomocí čtyř aributů…

/* co se mění, zde šířka */
transition-property: width; 
/* délka trvání, zde 2 vteřiny */
transition-duration: 2s; 
/* průběh, zde lineární */
transition-timing-function: linear; 
/* zpoždění, zde 1 vteřinu */
transition-delay: 1s;

…které je možné spojit do jednoho zápisu:

transition: width 2s linear 1s;

Vlastnosti je možné řetězit za sebe, resp. použít na víc pravidel. Např. přechod:

transition: font-weight 1s, padding 2s, background-color 4s;

• font po 1 vteřině změní tloušťku,
• padding se po 2 vteřinách zvětší,
• změní se po 4 vteřinách barva, ale tentokrát postupně – (barva pozadí sice byla specifikovaná v jiné třídě, ale je na stejném elementu, proto to funguje).

Pozor – efekty jsou aplikovány i na cestě “zpátky”! (uvidíte na příkladech)

Přidáme na naše tlačítko třídu “custom-button-transition“, pomocí kterého budeme přechod dělat. Zbytek kódu je stejný jako příklad nahoře.

U přechodu tu využijeme první 2 atributy pravidla (zápis vizte výše):

• na které pravidlo se přechod použije (např. size, padding, font-size, background…) a tu pak specifikovat do “hover” sekce – tj. hover sekce má pravidlo, jak prvek vypadá na konci efektu (logické),
• dobu trvání efektu pro každou vlastnost (mohu se lišit) – dává se do pravidla bez hover.

<div style="margin: 10px 0 30px 0">
    <a class="custom-button custom-button-transition" href="">Tlačítko</a>
</div>

/* zakladni CSS zustava stejne */

.custom-button-transition{ 
    transition: font-weight 1s, padding 2s, background-color 4s;
}

.custom-button-transition:hover{
    font-weight: bold;
    padding: 0.5em 2em;	 
}

Přiznám se, že tuto funkci nastavuji málokdy a proto jí nebudu věnovat moc pozornosti. Jde v podstatě o to, jaký je průběh přechodu. Např. nejprve rychle a potom pomalu. Nebo naopak. Nebo můžete specifikovat svůj vlastní způsob. Víc informací můžete najít v dokumentaci, pokud byste potřebovali průběh změnit.

Delay (zpoždění) je vcelku jasné nastavení přechodu – specifikujete, o kolik se efekt spozdí. Např: 2s znanemá, že tlačítko 2 vteřiny čeká a potom se zbarví a zvětší padding, jak v příkladě dole (vycházím tu z původního formátování tlačítka, které je úplně nahoře). U přechodu tedy využijeme 4. atribut pravidla (zápis vizte výše):

• transition-delay: <kolik-vterin>s

Přidáme na naše tlačítko třídu “custom-button-delay“, pomocí kterého budeme přechod dělat. Zbytek kódu je stejný jako příklad nahoře.

Ukázka HTML, výsledného tlačítka i CSS je zde:

<div style="margin: 10px 0 30px 0">
    <a class="custom-button custom-button-delay" href="">Tlačítko</a>
</div>

/* zakladni CSS zustava stejne */

.custom-button-delay{
    transition: padding 1s, background-color 1s;
    transition-delay: 1s;
}

.custom-button-delay:hover{
    padding: 0.5em 2em;	
}

Tranformation je další fajn věc v CSS, která přišla v podobnou dobu a opět rozšiřuje možnosti efektů.

Přidáme na naše tlačítko třídu “custom-button-transformation“, pomocí kterého budeme přechod dělat. Zbytek kódu je stejný jako příklad nahoře.

Ukázka HTML, výsledného tlačítka i CSS je zde:

<div style="margin: 10px 0 30px 0">
    <a class="custom-button custom-button-transformation" href="">Posunutí</a>
</div>

/* zakladni CSS zustava stejne */

.custom-button-transformation{
	display: block;
	width: 180px;
	text-align: center;
  transition: transform 1s;
}

.custom-button-transformation:hover{
  transform: translate(20px, 10px);
}

A nebo rotaci, třída “custom-button-rotate“:

<div style="margin: 10px 0 30px 0">
    <a class="custom-button custom-button-rotate" href="">ROTACE</a>
</div>

nebo zvětšení/zmenšení, deformace, a další…

/* zakladni CSS zustava stejne */

.custom-button-rotate{
	display: block;
	width: 100px;
	text-align: center;
  transition: transform 1s;
}

.custom-button-rotate:hover{
  transform: rotate(180deg);
}

Pokud by vás zajímal hover efekt na menu této stránky, tak je dělaný přesně tímto způsobem, popsaným výše.

Každá položka menu je odkaz a, kterému jsem jen přidala transition pravidlo, výchozí spodní okraj a cílový spodní okraj.

.et-menu a, .et-menu a:hover {
    transition: all 0.6s ease-in-out;
    border-bottom: 2px solid white;
}

.et-menu a:hover {
    border-bottom: 2px solid red;
}