Animații CSS
Ca să muți sau să restilizezi un element în timp nu ai nevoie de JavaScript, deoarece CSS poate anima singur elementele HTML.
Ce sunt animațiile CSS?
Printr-o animație, un element trece treptat de la un stil la altul, iar numărul proprietăților CSS implicate și numărul schimbărilor nu sunt limitate.
Mai întâi vin cadrele-cheie: ele descriu stilurile pe care trebuie să le aibă elementul în anumite momente, iar o animație CSS nu poate rula până când acestea nu există.
CSS animation-name și animation-duration
Două proprietăți pun o animație în mișcare. animation-name îi dă un nume, iar animation-duration stabilește cât durează o rulare. Dacă lași durata deoparte, nu se animă nimic, deoarece valoarea ei implicită este 0s (0 secunde).
Regula CSS @keyframes
Stilurile puse într-o regulă @keyframes marchează momentele prin care trece animația, iar elementul se schimbă treptat de la stilul curent spre fiecare stil nou.
Nimic din toate acestea nu are efect până când animația nu este legată de un element.
Exemplu
Aici un element <div> este legat de „myAnimation”. În 4 secunde, culoarea lui de fundal trece treptat de la roșu la galben. Cuvintele cheie from și to reprezintă 0% și 100%.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes From To</title>
<style>
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: from/to</h1>
<div></div>
</body>
</html>
Cadre-cheie procentuale
Procentele pot înlocui from și to și permit oricâte schimbări de stil. În acest caz, culoarea de fundal se schimbă la 0%, 25%, 50% și 100%.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Percent</title>
<style>
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Percentages</h1>
<div></div>
</body>
</html>
Culoare și poziție
Aici, cadrele-cheie de la 0%, 25%, 50%, 75% și 100% stabilesc atât o culoare de fundal, cât și o poziție, așa că elementul <div> se deplasează pe un traseu pătrat în timp ce culoarea i se schimbă.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Position</title>
<style>
@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;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Position and Color</h1>
<div></div>
</body>
</html>