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