Transition häsiýeti

transition häsiýeti - ýumşak geçişler üçin gysgaldyrylan häsiýet, bir wagtyň özünde transition-duration, transition-property, transition-timing-function we transition-delay häsiýetlerini belläp bermege mümkinçilik berýär.

Sintaksis

cssselektor {
  transition: baha;
}

Häsiýetleriň tertibiniň aýratyn ähmiýeti ýok, ýöne ýerine ýetirilýän wagt (transition-duration) garaşmak wagt (transition-delay)-dan öň gelmeli.

Bahalar

Degişli häsiýetlere serediň. Bölüp berlen bahasy: all 0s ease 0s.

none bahasy ähli geçişleri ýatyryar (olar derrew bolup geçer).

Mysal

Sichgani blok üstüne getiriň - 3 sekunt hiç zat bolmaz (3s garaşmak wagt), soň bolsa ol enişini 2 sekuntda ýumşak üýtgeder. Sichgani aýyrsaňyz - ýene 3 sekunt hiç zat bolmaz, soň bolsa ini başlangyç bahasyna ýumşak kemeler:

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Şeýle-de serediň

  • animation häsiýeti,
    onuň kömegi bilen animasiýa ýasap bolýar