Proprietăți ale animației CSS
Aici apar trei subiecte: direcția animației CSS, modul de umplere și proprietatea prescurtată.
Proprietatea CSS animation-direction
O animație poate rula înainte, înapoi sau în cicluri alternante, iar animation-direction decide care dintre acestea se aplică.
Valorile posibile sunt:
normal- Valoarea implicită: animația rulează înainte.reverse- Redarea are loc înapoi.alternate- Mai întâi vine o rulare înainte, urmată de una înapoi.alternate-reverse- Mai întâi vine o rulare înapoi, urmată de una înainte.
Direcție inversă
Aici, valoarea reverse face animația să ruleze înapoi.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga la dreapta folosind @keyframes, cu animation-direction setat la reverse, astfel încât să ruleze înapoi.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Reverse</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>animation-direction: reverse</h1>
<p>The animation plays in reverse direction (backwards):</p>
<div></div>
</body>
</html>
Direcție alternantă
Datorită valorii alternate, această animație merge înainte la prima rulare și înapoi la următoarea.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga la dreapta folosind @keyframes, cu animation-iteration-count setat la 2 și animation-direction setat la alternate, astfel încât să ruleze înainte apoi înapoi.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate</h1>
<p>The animation plays forwards first, then backwards:</p>
<div></div>
</body>
</html>
Direcție alternantă-inversă
Datorită valorii alternate-reverse, ordinea se inversează: înapoi la prima rulare și înainte la următoarea.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga la dreapta folosind @keyframes, cu animation-iteration-count setat la 2 și animation-direction setat la alternate-reverse astfel încât să se redea mai întâi înapoi, apoi înainte.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate-Reverse</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate-reverse</h1>
<p>The animation plays backwards first, then forwards:</p>
<div></div>
</body>
</html>
Proprietatea CSS animation-fill-mode
Înainte să ruleze primul keyframe și după ce se termină ultimul, o animație nu are niciun efect asupra elementului ei. Tocmai acest comportament îl poți schimba cu animation-fill-mode.
Proprietatea decide ce stil are elementul atunci când animația nu rulează, fie înainte de a începe, fie după ce se termină, fie în ambele cazuri.
Valori disponibile:
none- Niciun stil nu se păstrează înainte sau după animație; aceasta este valoarea implicită.forwards- Stilurile ultimului keyframe rămân pe element (care keyframe este ultimul depinde deanimation-directionșianimation-iteration-count).backwards- Stilurile primului keyframe se aplică elementului (care keyframe este primul depinde deanimation-direction) și rămân pe tot parcursul perioadeianimation-delay.both- Regulile pentru forwards și backwards se aplică împreună.
Modul de umplere forwards
După ce animația se termină, elementul păstrează valorile de stil ale ultimului keyframe.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga (0px) la dreapta (250px) folosind @keyframes, cu animation-fill-mode setat la forwards, astfel încât elementul să păstreze stilurile ultimului keyframe după terminarea animației. Folosiți o durată de 3s.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Forwards</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px; background-color: yellow;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: forwards</h1>
<p>The div retains the style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
Modul de umplere backwards
În perioada de întârziere, înainte ca animația să înceapă, elementul afișează deja valorile de stil ale primului keyframe.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga la dreapta folosind @keyframes, cu un animation-delay de 2s și animation-fill-mode setat la backwards, astfel încât elementul să primească stilurile primului keyframe în timpul perioadei de întârziere. Primul keyframe ar trebui să seteze background-color la yellow și left la 0px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Backwards</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes myAnimation {
from {left: 0px; background-color: yellow;}
to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: backwards</h1>
<p>The div gets the style values set by the first keyframe before the animation starts (during the delay):</p>
<div></div>
</body>
</html>
Modul de umplere both
Stilurile primului keyframe apar înainte de început, iar stilurile ultimului keyframe rămân după sfârșit.
Prompt
Creați o animație CSS care mută un div roșu de 100x100px de la stânga la dreapta folosind @keyframes, cu un animation-delay de 2s și animation-fill-mode setat la both, astfel încât elementul să primească stilurile primului keyframe înainte de a începe și să păstreze stilurile ultimului keyframe după terminare. Folosiți o durată de 3s.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Both</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes myAnimation {
from {left: 0px; background-color: yellow;}
to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: both</h1>
<p>The div gets the first keyframe styles before starting and retains the last keyframe styles after ending:</p>
<div></div>
</body>
</html>
Proprietatea prescurtată CSS pentru animație
Nu ai nevoie de câte un rând separat pentru fiecare proprietate de animație: proprietatea prescurtată animation le setează pe toate într-o singură linie.
Proprietăți lungi
Aici sunt scrise separat șase proprietăți de animație.
Prompt
Creați o animație CSS folosind proprietăți individuale de animație: animation-name myAnimation, animation-duration 5s, animation-timing-function linear, animation-delay 2s, animation-iteration-count infinite și animation-direction alternate. Animația ar trebui să mute un div roșu de 100x100px de la stânga la dreapta.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Longhand Properties</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Animation Using Individual Properties</h1>
<p>This example uses six individual animation properties:</p>
<div></div>
</body>
</html>
Proprietate prescurtată
Cu proprietatea prescurtată animation, efectul este identic cu cel din exemplul de mai sus.
Prompt
Creați o animație CSS folosind proprietatea prescurtată animation pentru a combina toate valorile pe o singură linie: animation: myAnimation 5s linear 2s infinite alternate. Animația ar trebui să mute un div roșu de 100x100px de la stânga la dreapta.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Shorthand Property</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation: myAnimation 5s linear 2s infinite alternate;
}
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
<h1>Animation Shorthand Property</h1>
<p>The same animation effect using the shorthand animation property:</p>
<div></div>
</body>
</html>