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.
@keyframes, in care se definesc stilurile CSS pe care trebuie sa le aibe elementul HTML la un moment dat.animation (sau sub-proprietatile) la elementul HTML, folosind acelasi nume.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>
Daca proprietatea animation-duration nu este adaugata, animatia nu se va efectua, deoarece valoarea implicita e 0s (0 secunde).
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.
<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>
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>
animation-delay - durata de timp pana cand va incepe animatia; numar de secunde sau milisecunde (Xs, Xms).animation-direction - configureaza directia si modul animatiei.animation-duration - durata de timp necesara animatiei pentru o ruta; numar de secunde sau milisecunde (Xs, Xms).animation-fill-mode - specifica un stil pentru elementul HTML cand animatia nu mai ruleaza (inainte de a incepe, dupa ce se termina, sau ambele).animation-iteration-count - numarul de rulari efectuate de animatie (default 1).animation-name - numele animatiei definit la @keyframes.animation-play-state - permite intreruperea si reluarea secventei de animatie.animation-timing-function - specifica modul de acceleratie al animatiei.
linear - animatia are aceeasi viteza de la inceput pana la sfarsit.ease - animatia are un start incet, apoi rapid si iar incetineste spre sfarsit (default).ease-in - start incet.ease-out - incetineste la sfarsit.ease-in-out - incet la start si la sfarsit.cubic-bezier(x1, y1, x2, y2) - puteti defini propriile vlori in functia cubic-bezier.:before, :after), si poate fi aplicata la pseudo-classe (precum :hover).
<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>
animation.
#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.<input type="number" name="points" min="5" max="80" />
#id {
filter:alpha(opacity=40); /* for IE */
opacity:0.4;
}var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.