თვისება transition

თვისება transition არის შემოკლება გლუვი გადასვლებისთვის, ის საშუალებას აძლევს ერთდროულად დააყენოთ transition-duration, transition-property, transition-timing-function და transition-delay.

სინტაქსი

cssსელექტორი {
  transition: მნიშვნელობა;
}

თვისებების თანმიმდევრობას მნიშვნელობა არ აქვს, თუმცა შესრულების დრო (transition-duration) უნდა იყოს დაყოვნებამდე (transition-delay).

მნიშვნელობები

იხილე შესაბამისი თვისებები. ნაგულისხმევი მნიშვნელობა: all 0s ease 0s.

მნიშვნელობა none აუქმებს ყველა გადასვლას (ისინი მოხდება მყისიერად).

მაგალითი

მიუთითეთ მაუსი ბლოკზე - 3 წამის განმავლობაში არაფერი მოხდება (დაყოვნებაა 3s), შემდეგ კი ის გლუვად შეცვლის თავის სიგანეს 2 წამში. თუ შემდეგ მაუსი მოაცილებთ - ისევ 3 წამის განმავლობაში არაფერი მოხდება, შემდეგ კი სიგანე გლუვად შემცირდება საწყის მნიშვნელობამდე:

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

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

Результат:

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