Wartość normal jest domyślną wartością właściwości animation-direction.
Domyślnie animacja elementu HTML posiada niezmieniony kierunek rozpoczęcia wykonywania się oraz niezmieniony kierunek co drugiego powtarzania wykonywania się.
animation-direction:normal;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada niezmieniony kierunek rozpoczęcia wykonywania się oraz niezmieniony kierunek co drugiego powtarzania wykonywania się.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
animation-name:moja-animacja-1;
animation-duration:4s;
animation-iteration-count:infinite;
text-align:center;
width:160px;
padding:0.5em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { transform:translateX(0); }
100% { transform:translateX(300px); }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości reverse właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek rozpoczęcia wykonywania się.
animation-direction:reverse;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "reverse".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
animation-name:moja-animacja-1;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:reverse;
text-align:center;
width:160px;
padding:0.5em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { transform:translateX(0); }
100% { transform:translateX(300px); }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości alternate właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek co drugiego powtarzania wykonywania się.
animation-direction:alternate;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "alternate".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
animation-name:moja-animacja-1;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate;
text-align:center;
width:160px;
padding:0.5em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { transform:translateX(0); }
100% { transform:translateX(300px); }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości alternate-reverse właściwości animation-direction możemy sprawić, że animacja interesującego nas elementu HTML będzie posiadała odwrotny kierunek rozpoczęcia wykonywania się oraz odwrotny kierunek co drugiego powtarzania wykonywania się.
animation-direction:alternate-reverse;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się oraz odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z wartością "alternate-reverse".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
animation-name:moja-animacja-1;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:alternate-reverse;
text-align:center;
width:160px;
padding:0.5em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { transform:translateX(0); }
100% { transform:translateX(300px); }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Jeżeli zdecydowaliśmy się na to, aby do interesującego nas elementu HTML dodać kilka animacji jednocześnie, wtedy za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wartości należących do właściwości animation-direction możemy określić osobny kierunek rozpoczęcia wykonywania się oraz osobny kierunek co drugiego powtarzania wykonywania się poszczególnej animacji interesującego nas elementu HTML.
Podana przez nas sekwencja wartości właściwości "animation-direction" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "animation-direction" będzie zawierała mniejszą liczbę wartości niż liczba posiadanych przez element HTML animacji, wtedy przeglądarka internetowa powtórzy podaną przez nas sekwencję wartości właściwości "animation-direction" tak, aby uzyskać wystarczającą liczbę wartości.
animation-direction:reverse, alternate;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", posiada odwrotny kierunek rozpoczęcia wykonywania się, natomiast animacja "moja-animacja-2", która również została dodana do przykładowego elementu "div", posiada odwrotny kierunek co drugiego powtarzania wykonywania się, ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-direction" wraz z następującą sekwencją wartości: "reverse, alternate".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
animation-name:moja-animacja-1, moja-animacja-2;
animation-duration:4s;
animation-iteration-count:infinite;
animation-direction:reverse, alternate;
text-align:center;
width:160px;
padding:0.5em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { transform:translateX(0); }
100% { transform:translateX(300px); }
}
@keyframes moja-animacja-2
{
0% { background-color:red; }
50% { background-color:orange; }
100% { background-color:pink; }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
