Transition-timing-function häsiýeti
transition-timing-function häsiýeti
transition ýumuşak geçişiň üýtgemek tizligini
(tizlenmesini) kesgitleýär. Mysal üçin,
ilki ýavaş, soňra çalt, soňra ýene ýavaş
we ş.m.
Sintaksis
selektor {
transition-timing-function: baha;
}
Baha bahalary
| Baha | Düşündiriş |
|---|---|
ease |
Ilki ýavaş, soňra çalt, ahyrynda ýene ýavaş. |
ease-in |
Ýavaş başlaýar we gidip tizleşýär. |
ease-out |
Çalt başlaýar we gidip durýar. |
ease-in-out |
Ilki ýavaş, soňra çalt, ahyrynda ýene ýavaş. Ease-den tizligi bilen tapawutlanýar. |
linear |
Hemişe birmeňzeş tizlik. |
step-start |
Animasiýa ýok, häsiýet derrew soňky bahany alýar. |
step-end |
Animasiýa ýok, häsiýet wagty gözleýär,
transition-duraton
bilen kesgitlenen, soňra bolsa bir zarbada soňky bahany alýar.
|
steps |
Häsiýetiň bahasy sekirmeler bilen üýtgeýär. |
cubic-bezier |
Islegiňiz ýaly animasiýany kesgitläp bilýän Bezýer egrisi. Bezýer egri generatoryna serediň. |
Belli däl baha: ease.
Turli bahalaryň deňeşdirilmegi
Aşakda görkezilen bloklaryň üstüne siçanyň kursoryny getiriň, hemme wagyt funksiýalaryň işini görüň:
Mysal
Blok üstüne siçany getiriň - ol ulylygyny
2 sekuntda ýumuşak üýtgerer. Sebäbi
ease-in bahasy kesgitlenen, animasiýa
ýavaş başlar we gidip tizleşer:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-timing-function: ease-in;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Şeýle hem serediň
-
transition-durationhäsiýeti,
ýumuşak geçişiň dowamlylygyny kesgitleýär -
transition-propertyhäsiýeti,
ýumuşak geçiş üçin häsiýetiň adyny kesgitleýär -
transition-delayhäsiýeti,
ýumuşak geçişden öň gijä galdyrmany kesgitleýär -
transitionhäsiýeti,
ýumuşak geçiş üçin gysgaça ýazylýandyr -
animationhäsiýeti,
animasiýa döretmäge mümkinçilik berýär