Webové zákusky

Kouzlo jménem „TRANSITION“

23. 2. 2022

„Transition“, v překladu „přechod“, je velice zajímavý efekt, který byl donedávna možný pouze za použití Javascriptu (a jiných jazyků). Jsem ráda, že tato skvělá věc přibyla i to CSS jako takového, protože umí spoustu zajímavých věcí – pár z nich si ukážeme.

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;
}

Jak transition nastavit

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;

Detaily zápisu

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)

1) transition property + transition-duration

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;	 
}

2) Transition-timing-function

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.



3) Transition-delay

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;	
}

Bonus: Transition + transformation

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);
}


Bonus 2: Menu

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;
}

Zdroje

W3school je pokladnice skvělých a jednoduchých ukázek z mnoha jazyků a pokud člověk hledá vysvětlení nějaké funkce, najde ho pravděpodobně tady. Stejně tak je tu článek o transition efektu z CSS:

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...