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

cssselektor {
  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:

html<div id="elem"></div>

css#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-duration häsiýeti,
ýumuşak geçişiň dowamlylygyny kesgitleýär
transition-property häsiýeti,
ýumuşak geçiş üçin häsiýetiň adyny kesgitleýär
transition-delay häsiýeti,
ýumuşak geçişden öň gijä galdyrmany kesgitleýär
transition häsiýeti,
ýumuşak geçiş üçin gysgaça ýazylýandyr
animation häsiýeti,
animasiýa döretmäge mümkinçilik berýär