Od provozovatele projektu Rychlost.CZ

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

vydáno: 11.07.2016, seriál: Začínáme s HTML | komentářů: 0

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