Animácie

Animácie

  • Dva kroky:
    • Definovanie cez @keyframes
    • Aplikovanie na element
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(300deg); } }
.box { animation-name: spin; animation-duration: 10s; }

Aplikácia animácie

  • poznáme z transition:
    • animation-duration: 2s
    • animation-delay: 1s
    • animation-timing-function: ease-in-out
  • animation-name: spin
  • animation-iteration-count
    • <číslo> - počet opakovaní animácie (default 1)
    • infinite - do nekonečna

Aplikácia animácie

  • animation-direction:
    • normal
      • Začína od 0% pokračuje k 100%
    • reverse
      • Začína od 100% pokračuje k 0%
    • alternate
      • Začína od 0% pokračuje k 100% a potom pokračuje k 0%
    • alternate-reverse
      • Začína od 100% pokračuje k 0% a pokračuje k 100%

Aplikácia animácie

  • animation-play-state:
    • má zmysel nastaviť cez JS
    • hodnoty running (default) a paused
  • animation-fill-mode:
    • none - default
    • forwards - po skončení animácie ostane v poslednom stave
    • backwards - pred začiatkom animácie sa nastaví na počiatočný stav (aj pred delay časom)
    • both
  • animation: meno 1s ease 0.5s infinite alternate both;
    • skratka pre všetky vlastnosti

Spinner

Loader - skákajúce guličky