transition-property қасиеті

transition-property қасиеті transition болашақ үшін біртіндеп өзгеретін анимацияланатын қасиетті орнатады. Мәні ретінде анимацияланатын CSS қасиетінің аты берілуі керек. Егер all мәні берілсе (әдепкі бойынша орнатылған) - барлық қасиеттер бірден анимацияланады.

Синтаксис

cssселектор {
  transition-property: мән;
}

Мысал

Блоктың үстіне тінтуірді апарғанда - оның ені біртіндеп өзгереді, себебі transition-property width мәніне ие:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Мысал . all мәні

Бұл мысалда transition-property all мәніне ие - сондықтан біртіндеп hover үшін жазылған барлық қасиеттер өзгереді (біздің жағдайда бұл width және height). Барлық өзгерістер transition-duration-та орнатылған бір уақыт ішінде жүреді:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Сондай-ақ қараңыз