Přechody a animace - Začínáme s HTML

vydáno: 11.07.2016, seriál: Začínáme s HTML

Toto je 17. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

V dnešním díle seriálu si ukážeme jak na různé přechody prvků a animace.

Transition

Přes css vlastnost transition můžeme prvky zvětšovat, prodlužovat a měnit jejich barvy. Přechod prvku lze i časovat a určovat jeho způsob. V následujících příkladech si ukážeme názorné použití.

Zvětšení prvku po najetí myší

Zobrazit ukázku

Ukázka:

CSS

h1 {
 font-size: 26px;
 margin-top: 24px;
 margin-bottom: 24px;
}

.blok {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: #ff0000;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  -webkit-transition: width 2s;
   transition: width 2s;
}

.blok:hover {
  width: 200px;
}

Použité vlastnosti: font-size, margin-top, margin-bottom, width, height, border-radius, background, line-height, text-align, font-weight, color

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Plynule zvětšující se prvek</title>

</head>

<body>

<h1>Plynule zvětšující se prvek</h1>

<div class="blok">CSS 3</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <div>

Způsob plynulého přechodu lze upravit. Možnosti máme v následující tabulce:

Zápis	Efekt
transition-timing-function: linear;	stejná rychlost přechodu jak na začátku, tak na konci
transition-timing-function: ease;	pomalu na začátku, rychlejší přechod, pomalý konec ( výchozí )
transition-timing-function: ease-in;	pomalý rozjezd
transition-timing-function: ease-out;	pomalý dojezd
transition-timing-function: ease-in-out;	pomalý rozjezd i dojezd
transition-timing-function: cubic-bezier (n,n,n,n);	vlastní hodnoty v cubic-bezier funkci

Dále lze nastavit prodleva a doba trvání přechodu. Pro prodlevu zapíšeme transition-delay: hodnota s; . Pro délku přechodu pak transition-duration: hodnota s; .

Plynulé přechody barvy odkazů

V případě že chceme udělat plynulý přechod pro odkaz, použijeme transition: color hodnota s; .

Zobrazit ukázku

Ukázka:

CSS

h1 {
 font-size: 26px;
 margin-top: 24px;
 margin-bottom: 24px;
}

a {
  font-size: 14px;
  color: #ff0000;
  transition: color 1s;
  font-size: 16px;
}

a:hover {
  color: #0000ff;
  transition: color 1s;
}

Použité vlastnosti: font-size, margin-top, margin-bottom, color

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Plynulá změna odkazu</title>

</head>

<body>

<h1>Plynulá změna odkazu</h1>

<a href="#" title="odkaz">Text odkazu</a>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <a>

Plynulá změna pozadí prvku

Pro plynulý přechod pozadí nám poslouží vlastnost transition: background 1s; . Následuje praktická ukázka:

Zobrazit ukázku

Ukázka:

CSS

h1 {
 font-size: 26px;
 margin-top: 24px;
 margin-bottom: 24px;
}

.blok {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: #ff0000;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  -webkit-transition: background 1s;
  -moz-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s;
}

.blok:hover {
  background: #0000ff;
  -webkit-transition: background 1s;
  -moz-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s;
}

Použité vlastnosti: font-size, margin-top, margin-bottom, width, height, border-radius, background, line-height, text-align, font-weight, color

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Plynulá změna pozadí prvku</title>

</head>

<body>

<h1>Plynulá změna pozadí prvku</h1>

<div class="blok">CSS 3</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <div>

Animace

Kromě přechodů transition existuje i čistá animace. CSS animace jsou podporované od IE verze 10. Prvně je nutné nadefinovat klíčové snímky ( keyframes ). Poté se danému prvku přes vlastnost animation přidělí konkrétní jméno animace.

Zobrazit ukázku

Ukázka:

CSS

h1 {
 font-size: 26px;
 margin-top: 24px;
 margin-bottom: 24px;
}

@keyframes nova-animace {
  0%   {background: red}
  50% {background: yellow}
  100% {background: orange}
}

.prvek {
  width: 100px;
  height: 100px;
  float: left;
  animation: nova-animace 5s linear;
}

Použité vlastnosti: font-size, margin-top, margin-bottom, background, width, height, float

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Animace</title>

</head>

<body>

<h1>Ukázka animace</h1>

<div class="prvek"></div>

</body>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <div>

Vlastnosti

Výčet vlastností animation v tabulce.

Vlastnost	Význam
animation-name	Jméno animace.
animation-duration	Délka animace v sekundách.
animation-timing-function	Ovlivnění chodu animace, stejně jako transition.
animation-delay	Zpoždění animace.
animation-direction	Hodnoty: normal, reverse, alternate, alternate-reverse. Směr animace.
animation-fill-mode	Hodnoty: none, forwards, backwards, both . Upřesňuje, zda se mají hodnoty prvního nebo posledního snímku projevovat i při skončení animace.
animation-play-state	Hodnoty: running, paused . Spuštění a zastavení animace.

Závěr

Na internetu se dají pro animace stáhnout celé CSS. Jedná se o animate.css . Dále lze pro případ potřeby napojit javascriptovou knihovnu pro plynulé načítání animací dle toho, jak se roluje obsah stránky.

Témata

Seriály

Přechody a animace - Začínáme s HTML

Transition

Zvětšení prvku po najetí myší

Plynulé přechody barvy odkazů

Plynulá změna pozadí prvku

Animace

Vlastnosti

Závěr

Seriál Začínáme s HTML

Seznam všech článků seriálu: