@keyframes buýrugy
@keyframes buýrugy animasiýanyň gurlap beriji
kadrlaryny kesgitleýär. Gurlap beriji kadr, mysal üçin, ýerine ýetirilişi,
ölçegi, reňki we ş.m. bolup bileren, belli bir wagt böleginde elemente
goşulýan, biziň CSS elementimiziň dürli häsiýetleridir.
Sintaksis
@keyframes animasiýanyň ady {
gurlap beriji kadrlar
}
Mysal
Gurlap beriji kadrlary kesgitläň:
<div id="elem"></div>
@keyframes anim {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: anim 3s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Mysal
Indi bolsa, kwadratymyzy ýokardan aşak animasiýa bilen hereket etdireliň:
<div id="elem"></div>
@keyframes anim {
from {
margin-top: 0%;
}
to {
margin-top: 10%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Mysal
Şekilimiziň inişligini, gurlap beriji nokatlary prosentlerde kesgitlep, animasiýa bilen artdyralyň:
<div id="elem"></div>
@keyframes anim {
from {
width: 10%;
}
to {
width: 40%;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Mysal
Indi bolsa, şekilimiziň geçirijiligini üýtgeteliň:
<div id="elem"></div>
@keyframes anim {
from {
background-color: #467CBC;
}
to {
background-color: #C2DDFD;
}
}
#elem {
animation: anim 2s infinite;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Şeýle hem garalyň
-
CSS animasiýasy üçin ähli häsiýetler
animation-name,animation-duration,animation-delay,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,keyframes -
transition– meňzeş geçişler (elementiň üstüne gelende animasiýa)