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
Made with Slides.com