Animație
Animația oferă posibilități ample pentru modificarea stilului unui element. La tranziții avem un set de proprietăți cu valori inițiale, care sunt cele pe care le are elementul înainte de începutul tranziției, și valori finale, care sunt setate după finalizarea tranziției. Pe de altă parte, la animație, putem avea nu doar două seturi de valori - inițiale și finale, ci și multiple seturi intermediare de valori.
Animația se bazează pe schimbarea secvențială a cadrelor cheie (keyframes). Fiecare cadru cheie definește un set de valori pentru proprietățile animate. Schimbarea secvențială a acestor cadre cheie reprezintă efectiv animația.
Practic, tranzițiile utilizează același model - definesc implicit două cadre cheie - inițial și final, iar tranziția în sine reprezintă trecerea de la cadru cheie inițial la cel final. Singura diferență în cazul animației este că pentru animație se pot defini multiple cadre cheie intermediare.
Declararea unui cadru cheie în CSS3 are următoarea formă:
@keyframes nume_animatie {
from {
/* valorile inițiale ale proprietăților CSS */
}
to {
/* valorile finale ale proprietăților CSS */
}
}După cuvântul cheie @keyframes urmează numele animației. Apoi, în acolade, sunt definite cel puțin două cadre cheie. Blocul după cuvântul cheie from declară cadru cheie inițial, iar după cuvântul to în bloc se definește cadru cheie final. În interiorul fiecărui cadru cheie se definește una sau mai multe proprietăți CSS, similar cu crearea unui stil obișnuit.
De exemplu, să definim o animație pentru culoarea de fundal a unui element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animație în CSS3</title>
<style>
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>În acest caz, animația se numește backgroundColorAnimation. Numele animației poate fi oricare.
Această animație oferă o tranziție de la culoarea roșie la albastră a fundalului. După finalizarea animației, culoarea care va fi setată este cea definită la elementul div.
Pentru a atașa animația la un element, în stilul acestuia se utilizează proprietatea animation-name. Valoarea acestei proprietăți este numele animației aplicate.
De asemenea, cu ajutorul proprietății animation-duration se stabilește timpul animației în secunde sau milisecunde. În acest caz, timpul animației este de 2 secunde.
Dacă este definit așa, animația va începe imediat după încărcarea paginii. Totuși, animația poate fi de asemenea declanșată de o acțiune a utilizatorului. De exemplu, prin definirea stilului pentru pseudoclasele :hover, se poate seta declanșarea animației când cursorul mouse-ului este deasupra elementului:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
}
div:hover{
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}Multiple cadre cheie
Așa cum am menționat, animația poate include mai multe cadre cheie intermediare. Pentru a defini un cadru intermediar, se folosește un procentaj al duratei animației în care acest cadru ar trebui să fie aplicat:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
25%{
background-color: yellow;
}
50%{
background-color: green;
}
75%{
background-color: blue;
}
to {
background-color: violet;
}
}În acest caz, animația începe cu roșu, schimbându-se la galben la 25% din timp, la verde la 50% și așa mai departe.
De asemenea, se poate anima simultan mai multe proprietăți într-un singur cadru cheie:
@keyframes backgroundColorAnimation {
from {
background-color: red;
opacity: 0.2;
}
to {
background-color: blue;
opacity: 0.9;
}
}Se pot defini și mai multe animații separate, dar să fie aplicate împreună:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes opacityAnimation {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 3s;
}Valorile proprietăților animation-name și animation-duration sunt enumerate prin virgulă, iar numele animației și durata ei sunt asociate prin poziție, de exemplu, opacityAnimation va dura 3 secunde.
Finalizarea animației
În general, după finalizarea perioadei de timp specificate la animation-duration, se finalizează și execuția animației. Cu toate acestea, cu ajutorul unor proprietăți suplimentare, acest comportament poate fi modificat.
Astfel, proprietatea animation-iteration-count definește de câte ori se va repeta animația. De exemplu, 3 repetări ale animației la rând:
animation-iteration-count: 3;Dacă este necesar ca animația să fie repetată de un număr infinit de ori, acestei proprietăți i se atribuie valoarea infinite:
animation-iteration-count: infinite;La repetare, animația va începe din nou de la cadru cheie inițial. Dar, cu ajutorul proprietății animation-direction: alternate;, direcția opusă a animației poate fi setată la repetare. Astfel, aceasta va începe de la cadru cheie final și va merge invers spre cel inițial:
animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 2s;
animation-iteration-count: 3;
animation-direction: alternate;La terminarea animației, browserul setează stilul elementului animat la cel care era înainte de aplicarea animației. Totuși, proprietatea animation-fill-mode: forwards; permite ca valoarea finală a proprietății animate să fie exact cea din ultimul cadru:
animation-name: backgroundColorAnimation;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;Întârziere animație
Cu ajutorul proprietății animation-delay se poate defini timpul de întârziere pentru începutul unei animații:
animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-delay: 1s; /* întârziere de 1 secundă */Funcția de suavitate a animației
La fel ca la tranziții, la animații se pot aplica aceleași funcții de suavitate:
- linear: funcția liniară de suavitate, schimbarea proprietății se face uniform pe parcursul timpului
- ease: funcția de suavitate la care animația accelerează spre mijloc și încetinește spre sfârșit, oferind o schimbare mai naturală
- ease-in: funcția de suavitate la care are loc doar accelerarea la început
- ease-out: funcția de suavitate la care are loc doar accelerarea la sfârșit
- ease-in-out: funcția de suavitate la care animația accelerează spre mijloc și încetinește spre sfârșit, oferind o schimbare mai naturală
- cubic-bezier: se aplică o funcție cubică Bezier pentru animație
Pentru setarea funcției de suavitate se folosește proprietatea animation-timing-function:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div {
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
animation-name: backgroundColorAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}Proprietatea animation
Proprietatea animation este o metodă scurtă de a defini proprietățile discutate anterior:
animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode;Primii doi parametri, care oferă numele și durata animației, sunt obligatorii. Celelalte valori sunt opționale.
Iată un set de proprietăți echivalente:
animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;Acest set este echivalent cu următoarea definiție de animație:
animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;Crearea unui banner animat
Ca exemplu de animație, vom crea un banner animat simplu:
<!DOCTYPE html>
<html>
<head>
<title>HTML-banner</title>
<meta charset="utf-8" />
<style type="text/css">
@keyframes text1
{
10% { opacity: 1; }
40% { opacity: 0; }
}
@keyframes text2
{
30% { opacity: 0; }
60% { opacity: 1; }
}
@keyframes banner
{
10% { background-color: #008978; }
40% { background-color: #34495e; }
80% { background-color: green; }
}
.banner
{
width: 600px;
height: 120px;
background-color: #777;
margin: 0 auto;
position: relative;
}
.text1, .text2
{
position: absolute;
width: 100%;
height: 100%;
line-height: 120px;
text-align: center;
font-size: 40px;
color: #fff;
opacity: 0;
}
.text1
{
animation: text1 6s infinite;
}
.text2
{
animation: text2 6s infinite;
}
.animated
{
opacity: 0.8;
position: absolute;
width: 100%;
height: 100%;
background-color: #34495e;
animation: banner 6s infinite;
}
</style>
</head>
<body>
<div class="banner">
<div class="animated">
<div class="text1">Только в этом месяце</div>
<div class="text2">Скидки до 20%</div>
</div>
</div>
</body>
</html>Aici, trei animații sunt active simultan. Animația "banner" schimbă culoarea de fundal a bannerului, iar animațiile text1 și text2 alternează vizibilitatea textelor prin ajustarea opacității. Când primul text este vizibil, al doilea este invizibil și invers, creând astfel o animație de text în banner.