თვისება 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;
}

Результат:

იხილეთ აგრეთვე