Својство 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;
}

Результат:

Погледнете ги исто така