Proprietatea CSS animation-delay
Ca să faci o animație să aștepte înainte de a începe, dă-i proprietății animation-delay o valoare de timp.
Funcționează și o valoare negativă, iar efectul este invers: animația începe ca și cum acea parte din ea ar fi rulat deja.
Exemplu
Aici, animația așteaptă 2 secunde înainte de a începe să ruleze:
Prompt
Creați o pagină care afișează un div roșu de 100x100px ce folosește o animație CSS pentru a se deplasa de la stânga la dreapta. Setați animation-delay la 2 secunde, astfel încât animația să înceapă după o pauză de 2 secunde. Folosiți @keyframes pentru a muta div-ul de la left:0px la left:250px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-delay Property</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div class="box"></div>
</body>
</html>
Întârziere negativă
Redarea pornește de pe parcurs, ca și cum 2 secunde din ea ar fi trecut deja:
Prompt
Creați o pagină care afișează un div roșu de 100x100px ce folosește o animație CSS pentru a se deplasa de la stânga la dreapta. Setați animation-delay la -2s, astfel încât animația să înceapă ca și cum ar fi rulat deja de 2 secunde. Folosiți un animation-duration de 4 secunde și @keyframes pentru a muta de la left:0px la left:250px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negative Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Using Negative Delay</h1>
<p>The animation will start as if it had already been playing for 2 seconds:</p>
<div class="box"></div>
</body>
</html>
Proprietatea CSS animation-iteration-count
De câte ori rulează o animație se controlează cu animation-iteration-count.
Exemplu
Aici, animația rulează de trei ori, apoi se oprește:
Prompt
Creați o pagină care afișează un div roșu de 100x100px ce folosește o animație CSS pentru a se deplasa de la stânga la dreapta. Setați animation-iteration-count la 3, astfel încât animația să ruleze de 3 ori. Folosiți @keyframes pentru a muta div-ul de la left:0px la left:250px cu o durată de 4 secunde.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Iteration Count</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<p>The animation will run 3 times before it stops:</p>
<div class="box"></div>
</body>
</html>
Iterație infinită
Valoarea infinite face animația să continue la nesfârșit:
Prompt
Creați o pagină care afișează un div roșu de 100x100px ce folosește o animație CSS pentru a se deplasa de la stânga la dreapta la infinit. Setați animation-iteration-count la infinite. Folosiți @keyframes pentru a muta div-ul de la left:0px la left:250px cu o durată de 4 secunde.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Animation</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Infinite Animation</h1>
<p>The animation will run forever:</p>
<div class="box"></div>
</body>
</html>
Proprietatea CSS animation-timing-function
Curba de viteză a unei animații vine de la animation-timing-function, care acceptă aceste valori:
ease- valoarea implicită: început lent, apoi rapid, apoi final lentlinear- rulează cu aceeași viteză constantă de la început până la sfârșitease-in- începe lentease-out- se termină lentease-in-out- începe și se termină lentcubic-bezier(n,n,n,n)- propriile tale valori, date într-o funcție cubic-bezier
Exemplu
Mai jos apar câteva dintre curbele de viteză disponibile:
Prompt
Creați o pagină cu cinci div-uri roșii de 100x100px așezate vertical, fiecare afișând o valoare diferită pentru animation-timing-function: linear, ease, ease-in, ease-out și ease-in-out. Toate div-urile se animă de la left:0px la left:250px cu o durată de 4 secunde și un număr infinit de iterații. Etichetați fiecare div cu numele funcției sale de temporizare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Timing Function</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-timing-function Property</h1>
<p>The animation-timing-function property specifies the speed curve of the animation:</p>
<p>linear:</p>
<div class="box" id="div1"></div>
<p>ease:</p>
<div class="box" id="div2"></div>
<p>ease-in:</p>
<div class="box" id="div3"></div>
<p>ease-out:</p>
<div class="box" id="div4"></div>
<p>ease-in-out:</p>
<div class="box" id="div5"></div>
</body>
</html>