Blog

Kouzlo jménem “TRANSITION”

Úno 23, 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;
}

Inspirace

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:

Co si ještě přečíst?

Zajímavosti z projektů

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Bezvýpadkové nasazení webu

O co vlastně jde Ne vždy má člověk štěstí na to, aby dělal nový web od základu a občas je potřeba...

Práce s DIVI

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...

Mega menu bez pluginu

Poslední dobou čím dál častěji potkávám tzv. "Mega-menu", tedy podmenu, které je přes celou šířku...

Návody

Dlouhé sticky menu na mobilu

Při použití sticky menu (menu, které při scrolování stránky zůstane nalepené nahoře a je tedy vždy...

Jak změnit wp-login URL

Občas je zajímavé podívat se, kdo na Váš web chodí a hlavně - kam. Např. pluginy jako Wordfence a...

Lokální fonty v DIVI

DIVI má k dispozici velký výběr fontů, hlavně Google Fonts (i když některé chybí) a další. V tom...