Wartość none jest domyślną wartością właściwości animation-fill-mode.
Domyślnie przed momentem rozpoczęcia pierwszego wykonania się animacji lub w momencie zakończenia ostatniego wykonania się animacji element HTML nie otrzymuje żadnych dodatkowych właściwości CSS od animacji, którą posiada.
animation-fill-mode:none;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się, jak również w momencie zakończenia ostatniego wykonania się nie przekazuje żadnych dodatkowych właściwości CSS do przykładowego elementu "div".
<!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:10s;
animation-delay:5s;
text-align:center;
width:160px;
padding:2em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { background-color:blue; }
25% { background-color:green; }
50% { background-color:red; }
75% { background-color:orange; }
100% { background-color:pink; }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości backwards właściwości animation-fill-mode możemy sprawić, że przed momentem rozpoczęcia pierwszego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w pierwszym selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.
animation-fill-mode:backwards;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "blue" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "backwards".
<!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:10s;
animation-delay:5s;
animation-fill-mode:backwards;
text-align:center;
width:160px;
padding:2em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { background-color:blue; }
25% { background-color:green; }
50% { background-color:red; }
75% { background-color:orange; }
100% { background-color:pink; }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości forwards właściwości animation-fill-mode możemy sprawić, że w momencie zakończenia ostatniego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w ostatnim selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.
animation-fill-mode:forwards;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "forwards".
<!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:10s;
animation-delay:5s;
animation-fill-mode:forwards;
text-align:center;
width:160px;
padding:2em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { background-color:blue; }
25% { background-color:green; }
50% { background-color:red; }
75% { background-color:orange; }
100% { background-color:pink; }
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Za pomocą wartości both właściwości animation-fill-mode możemy sprawić, że przed momentem rozpoczęcia pierwszego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w pierwszym selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML, natomiast w momencie zakończenia ostatniego wykonania się animacji interesujący nas element HTML otrzyma wszystkie właściwości CSS występujące w ostatnim selektorze należącym do reguły @keyframes tworzącej animację wspomnianego elementu HTML.
animation-fill-mode:both;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "blue" do przykładowego elementu "div", natomiast w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z wartością "both".
<!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:10s;
animation-delay:5s;
animation-fill-mode:both;
text-align:center;
width:160px;
padding:2em;
font-size:1.3em;
background-color:#7DCDE8;
}
@keyframes moja-animacja-1
{
0% { background-color:blue; }
25% { background-color:green; }
50% { background-color:red; }
75% { background-color:orange; }
100% { background-color:pink; }
}
</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-fill-mode możemy określić w jaki sposób interesujący nas element HTML może otrzymywać dodatkowe właściwości CSS od poszczególnych animacji, które posiada.
Podana przez nas sekwencja wartości właściwości "animation-fill-mode" nie może zawierać wartości globalnych.
Jeżeli podana przez nas sekwencja wartości właściwości "animation-fill-mode" 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-fill-mode" tak, aby uzyskać wystarczającą liczbę wartości.
animation-fill-mode:none, both;
Animacja "moja-animacja-1", która została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się, jak również w momencie zakończenia ostatniego wykonania się nie przekazuje żadnych dodatkowych właściwości CSS do przykładowego elementu "div", natomiast animacja "moja-animacja-2", która również została dodana do przykładowego elementu "div", przed momentem rozpoczęcia pierwszego wykonania się przekazuje właściwość "background-color" wraz z wartością "red" do przykładowego elementu "div", natomiast w momencie zakończenia ostatniego wykonania się przekazuje właściwość "background-color" wraz z wartością "pink" do przykładowego elementu "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "animation-fill-mode" wraz z następującą sekwencją wartości: "none, both".
<!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-delay:5s;
animation-fill-mode:none, both;
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>
