CSS- animasies
CSS-animasies
CSS laat animasie van HTML-elemente toe sonder om JavaScript of Flash te gebruik!
In hierdie hoofstuk sal jy leer oor die volgende eienskappe:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Blaaierondersteuning vir animasies
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Wat is CSS-animasies?
'n Animasie laat 'n element geleidelik van een styl na 'n ander verander.
Jy kan soveel CSS-eienskappe verander wat jy wil, soveel keer as wat jy wil.
Om CSS-animasie te gebruik, moet jy eers 'n paar sleutelrame vir die animasie spesifiseer.
Sleutelrame hou watter style die element op sekere tye sal hê.
Die @keyframes-reël
Wanneer jy CSS-style binne die @keyframes
reël spesifiseer, sal die animasie op sekere tye geleidelik van die huidige styl na die nuwe styl verander.
Om 'n animasie te laat werk, moet jy die animasie aan 'n element bind.
Die volgende voorbeeld bind die "voorbeeld"-animasie aan die <div>-element. Die animasie sal vir 4 sekondes duur, en dit sal geleidelik die agtergrondkleur van die <div>-element van "rooi" na "geel" verander:
Voorbeeld
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Let wel: Die animation-durationeiendom definieer hoe lank 'n animasie moet neem om te voltooi. As die animation-durationeiendom nie gespesifiseer is nie, sal geen animasie plaasvind nie, want die verstekwaarde is 0s (0 sekondes).
In die voorbeeld hierbo het ons gespesifiseer wanneer die styl sal verander deur die sleutelwoorde "van" en "na" te gebruik (wat 0% (begin) en 100% (voltooi) verteenwoordig).
Dit is ook moontlik om persent te gebruik. Deur persent te gebruik, kan jy soveel stylveranderinge byvoeg as wat jy wil.
Die volgende voorbeeld sal die agtergrondkleur van die <div>-element verander wanneer die animasie 25% voltooi is, 50% voltooi is, en weer wanneer die animasie 100% voltooi is:
Voorbeeld
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Die volgende voorbeeld sal beide die agtergrondkleur en die posisie van die <div>-element verander wanneer die animasie 25% voltooi is, 50% voltooi is, en weer wanneer die animasie 100% voltooi is:
Voorbeeld
/* The animation code */
@keyframes example
{
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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Vertraag 'n animasie
Die animation-delayeiendom spesifiseer 'n vertraging vir die begin van 'n animasie.
Die volgende voorbeeld het 'n vertraging van 2 sekondes voordat die animasie begin word:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Negatiewe waardes word ook toegelaat. As negatiewe waardes gebruik word, sal die animasie begin asof dit reeds vir N sekondes gespeel het.
In die volgende voorbeeld sal die animasie begin asof dit reeds vir 2 sekondes gespeel het:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Stel hoeveel keer 'n animasie moet loop
Die animation-iteration-counteiendom spesifiseer die aantal kere wat 'n animasie moet loop.
Die volgende voorbeeld sal die animasie 3 keer laat loop voordat dit stop:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Die volgende voorbeeld gebruik die waarde "oneindig" om die animasie vir ewig te laat voortduur:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Begin animasie in omgekeerde rigting of alternatiewe siklusse
Die animation-directioneiendom spesifiseer of 'n animasie vorentoe, agtertoe of in alternatiewe siklusse gespeel moet word.
Die animasie-rigting-eienskap kan die volgende waardes hê:
normal- Die animasie word soos normaal gespeel (voorwaartse). Dit is verstekreverse- Die animasie word in omgekeerde rigting (agtertoe) gespeelalternate- Die animasie word eers vorentoe gespeel, dan agtertoealternate-reverse- Die animasie word eers agteruit gespeel, dan vorentoe
Die volgende voorbeeld sal die animasie in omgekeerde rigting (agtertoe) laat loop:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
Die volgende voorbeeld gebruik die waarde "alternate" om die animasie eers vorentoe en dan agtertoe te laat loop:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
Die volgende voorbeeld gebruik die waarde "alternate-reverse" om die animasie eers agteruit en dan vorentoe te laat loop:
Voorbeeld
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Spesifiseer die spoedkurwe van die animasie
Die animation-timing-functioneiendom spesifiseer die spoedkurwe van die animasie.
Die animasie-tydberekening-funksie-eienskap kan die volgende waardes hê:
ease- Spesifiseer 'n animasie met 'n stadige begin, dan vinnig, dan eindig stadig (dit is verstek)linear- Spesifiseer 'n animasie met dieselfde spoed van begin tot eindeease-in- Spesifiseer 'n animasie met 'n stadige beginease-out- Spesifiseer 'n animasie met 'n stadige eindeease-in-out- Spesifiseer 'n animasie met 'n stadige begin en eindecubic-bezier(n,n,n,n)- Laat jou jou eie waardes definieer in 'n kubieke bezier-funksie
Die volgende voorbeeld toon sommige van die verskillende spoedkurwes wat gebruik kan word:
Voorbeeld
#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;}
Spesifiseer die vulmodus vir 'n animasie
CSS-animasies beïnvloed nie 'n element voordat die eerste sleutelraam gespeel is of nadat die laaste sleutelraam gespeel is nie. Die animasie-vul-modus-eienskap kan hierdie gedrag ignoreer.
Die animation-fill-modeeienskap spesifiseer 'n styl vir die teikenelement wanneer die animasie nie speel nie (voordat dit begin, nadat dit eindig, of albei).
Die animasie-vul-modus-eienskap kan die volgende waardes hê:
none- Standaard waarde. Animasie sal geen style op die element toepas voor of nadat dit uitgevoer word nieforwards- Die element sal die stylwaardes behou wat deur die laaste sleutelraam gestel is (hang af van animasie-rigting en animasie-iterasie-telling)backwards- Die element sal die stylwaardes kry wat deur die eerste sleutelraam gestel word (hang af van animasie-rigting), en dit behou gedurende die animasie-vertragingsperiodeboth- Die animasie sal die reëls vir beide vorentoe en agtertoe volg, en die animasie-eienskappe in beide rigtings uitbrei
Die volgende voorbeeld laat die <div>-element die stylwaardes van die laaste sleutelraam behou wanneer die animasie eindig:
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Die volgende voorbeeld laat die <div>-element die stylwaardes kry wat deur die eerste sleutelraam gestel is voordat die animasie begin (gedurende die animasievertragingsperiode):
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Die volgende voorbeeld laat die <div>-element die stylwaardes kry wat deur die eerste sleutelraam gestel is voordat die animasie begin, en behou die stylwaardes van die laaste sleutelraam wanneer die animasie eindig:
Voorbeeld
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animasie Snelskrif Eiendom
Die voorbeeld hieronder gebruik ses van die animasie-eienskappe:
Voorbeeld
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Dieselfde animasie-effek as hierbo kan verkry word deur die snelskrif-
animationeienskap te gebruik:
Voorbeeld
div
{
animation: example 5s linear 2s infinite alternate;
}
CSS-animasie-eienskappe
Die volgende tabel lys die @keyframes-reël en al die CSS-animasie-eienskappe:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |