Web Design
Lecția 8
CSS - Animation
- Definește o animație: o succesieune de schimbări ale stării unui obiect. Ea se poate repeta.
- O animație se definește prin cuvântul cheie @keyframes și numele acesteia.
- Apoi se definește cum va arăta obiectul (reguli css) la diferite procente din timpul de rulare al animației.
@keyframes exemplu{
0%{
background-color: red;
left:0px;
}
50%{background-color: yellow; left:200px;}
100% {background-color: red; left:0px;}
}Exemplu:
Definirea animației
.colorChange{
animation-name: exemplu;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* SAU */
.colorChange{
animation: exemplu 2s infinite;
}Exemplu:
Aplicarea animației
Se aplică ca și proprietăți ale unui element:
- animation-name: - obligatoriu, numele anmatiei de aplicat
- animation-duration: -obligatoriu, durata de rulare a animatiei
- animation-iteration-count: - de câte ori sa ruleze animatia
- animation-direction: - direcția in care să se facă frameurile: poate fi normal, reversed, alternate
- animation-fill: forward; - dacă vrem ca animația să-și păstreze modificările
Se pot combina toate într-o singură proprietate: animation.
Includerea de CSS extern
- Fonturi
- Animatii
- Icon-uri
W1L8
By Academia de Informatică
