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%
- normal
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