Proprietatea "animation", sau sub-proprietatile ei pot fi utilizate pentru a anima alte proprietati CSS aplicate elementelor HTML, cum ar fi: color, background-color, height, sau width.


• O alta metoda de a anima proprietatile unui element HTML cu CSS este utilizand proprietatea "transition". Vedeti tutorialul: CSS3 transition.


Elementul <style> din aceste exemple se adauga in sectiunea <head> din pagina.


Creare Animatie cu CSS

Ca sa faceti animatii cu CSS, mai intai se definesc "keyframes" cu un nume pentru animatie, folosind instructiunea @keyframes, in care se definesc stilurile CSS pe care trebuie sa le aibe elementul HTML la un moment dat.
Apoi, se adauga proprietatea animation (sau sub-proprietatile) la elementul HTML, folosind acelasi nume.

- In urmatorul exemplu se defineste si se adauga animatia "ex1_anim" la elementul "#anim_ex1". Animatia va dura 4 secunde de la inceput pana la sfarsit (0% la 100%), si va schimba gradual valoarea margin-left pentru #anim_ex1 de la "0" la "80%". Aceasta va avea ca efect miscarea acelui <div> de la stanga la dreapta.
<style>
 /* The animation code */
@keyframes ex1_anim {
 0% { margin-left: 0;}
 100% { margin-left: 80%;}
}

/* The element to apply the animation to */
#anim_ex1 {
 animation-name: ex1_anim;
 animation-duration: 4s;
 background-color: red;
 padding: 20px 0;
 width: 90px;
}
</style>

<div id='anim_ex1'>HTML Div</div>
- Demo:
- Clic pe acest buton: ca sa vedeti rezultatul codului de deasupra.
HTML Div

Daca proprietatea animation-duration nu este adaugata, animatia nu se va efectua, deoarece valoarea implicita e 0s (0 secunde).


Animatie CSS - pasi multipli

In exemplu de sus, animatia "@keyframes ex1_anim" are definiti doi pasi: 0% este inceputul animatiei, si 100% e sfarsitul.
Puteti adauga oricat de multi pasi (schimbari de stil) doriti.

- Urmatorul exemplu are patru pasi pentru animatie (0%, 30%, 55, 100%) care seteaza diferite proprietati CSS pentru a transforma, roti, muta si schimba culoarea de fundal in mod gradual.
<style>
@keyframes ex2_anim {
 0% { margin-left: 0;}
 30% {
 border-radius: 100%;
 transform: scale(1.5);
 }
 55% {
 transform: rotate(180deg);
 }
 100% {
 background-color: #0000e0;
 margin-left: 85%;
 transform: rotate(360deg);
 }
}

#anim_ex2 {
 animation-name: ex2_anim;
 animation-duration: 4s;
 background-color: red;
 padding: 20px 0;
 width: 90px;
}
</style>

<div id='anim_ex2'>HTML Div</div>
- Demo:
- Clic pe acest buton: ca sa vedeti rezultatul codului de deasupra.
HTML Div

Animatie CSS - sub-proprietati

Sunt mai multe sub-proprietati care se pot utiliza la configurarea animatiei cu CSS. Mai jos este o lista cu aceste sub-proprietati.

- Iata un exemplu cu unele din acestea. Animatia incepe dupa 1 secunde (delay 1) si e rulata de 3 ori, "alternate" (prima rulare in fata, a doua inapoi), si "linear" (cu aceeasi viteza de la inceput pana la sfarsit).
Cand animatia se termina, elementul ramane in pozitia din fata (forwards, cu stilul definit la ultimul pas, 100%): animation-fill-mode: forwards;.
<style>
@keyframes ex3_anim {
 0% { margin-left: 0;}
 50% {
 transform: scale(.8);
 transform: rotate(225deg);
 }
 100% {
 background-color: #5588ed;
 border-radius: 100%;
 margin-left: 85%;
 transform: rotate(450deg);
 }
}

#anim_ex3 {
 animation-name: ex3_anim;
 animation-duration: 2.5s;
 animation-delay: 1s;
 animation-direction: alternate;
 animation-iteration-count: 3;
 animation-fill-mode: forwards;
 animation-play-state: running; 
 animation-timing-function: linear;
 background-color: red;
 padding: 20px 0;
 width: 80px;
}
</style>

<div id='anim_ex3'>HTML Div</div>
- Demo:
- Clic pe acest buton: ca sa vedeti rezultatul.
HTML Div

Sub-proprietati pentru animatia CSS


Animatie cu CSS la pseudo-clase si pseudo-elemente

Animatia cu CSS se poate crea si la pseudo-elemente (:before, :after), si poate fi aplicata la pseudo-classe (precum :hover).
- Exemplu, cand mouse-ul este deasupra elementului #anim_pse, se creaza un pseudo-element cu ":after", care va fi animat.
<style>
@keyframes pse_anim {
 0% {
 left: 50%;
 height:0;
 width: 0;
 }
 50% {
 transform: rotate(180deg);
 }
 100% {
 border-radius: 100%;
 transform: rotate(360deg);
 left: 250px;
 height: 40px;
 width: 40px;
 }
}

#anim_pse {
 position: relative;
 text-align:center;
 padding:20px 0;
 width: 90px;
 background-color: red;
}

#anim_pse:hover:after {
 animation-name: pse_anim;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 background-color: #0000da;
 content: ' ';
 display: block;
 margin: 0;
 position: absolute;
 top: 25%;
}
</style>

Pozitionati mouse-ul peste patratul rosu.
<div id="anim_pse">Hello Sir</div>
Demo:
Pozitionati mouse-ul peste patratul rosu.
Hello Sir

Proprietatea animation

Pentru cei mai avansati, se pot adauga valorile mai multor sub-proprietati intr-o singura proprietate CSS: animation.
- Exemplu urmator foloseste sase din proprietatile CSS de animatie:
#elm_id {
 animation-name: example;
 animation-duration: 4s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
- Acelasi efect de animatie se poate obtine cu proprietatea animation:
#elm_id {
 animation: example 4s linear 2s infinite alternate;
}
Se pot anima multe proprietati CSS: "background-color, height, margin, opacity, padding, transform, width", si altele.
La MDN e o lista cu Animatable CSS properties.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Animatie elemente HTML cu CSS

Last accessed pages

  1. Adverbele in limba engleza - Adverbs (13238)
  2. Introducere in HTML (8533)
  3. Coduri pt culori (24941)
  4. Instructiuni repetitive for si while (1645)
  5. Curs HTML gratuit Tutoriale HTML5 (30146)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2367)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1301)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (856)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (804)