Přechody a animace

Přechody

Vlastnost transition
Říká, jakým způsobem se mají hodnoty ostatních vlastností měnit z jednoho stavu do druhého například po najetí myši
Většinou reaguje na uživatelovu akci
Typicky plynulá změna odkazu v menu po najetí myši, vyjetí bočního menu, zatmavení stránky při zobrazení modalu
transition-property: opacity;
transition-duration: 300ms;
transition-delay: 1s;
transition-timing-function: ease;
Vlastní timing-function cubic-bezier.com

Cvičení 1

Dostihy (přechody)
github.com/Czechitas-podklady-WEB/Cviceni-Dostihy

Animace

Vlastnost animation developer.mozilla.org/en-US/docs/Web/CSS/animation
Definice přes @keyframes developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Můžou odstartovat hned a v nekonečné smyčce
Například oživení pozadí (https://www.eatresponsibly.eu)

Cvičení 2

Hodiny (animace)
github.com/Czechitas-podklady-WEB/Cviceni-Hodiny