Транзишъни

Най-важното за CSS транзишъните

Транзишъните правят промяната на CSS свойствата плавна вместо мигновена. Те се активират, когато дадено свойство се промени – например при :hover. Най-важното е, че трябва изрично да посочите кое свойство да се анимира и за колко време да продължи анимацията. Ако свойството не е включено в транзишъна, промяната ще остане моментална.

Стъпка по стъпка: създаване на плавен hover ефект

1. Създайте ul с едно li и му задайте id="TransitionDemo".
2. В CSS:
   • Премахнете булетите (list-style: none;).
   • Задайте на li:
     • position: relative;
     • left: 0;
     • width: 50px;
     • height: 50px;
     • background: red;
3. Добавете :hover на родителя и променете left: 250px; – ще видите моментално преместване.
4. Добавете транзишън към li, например за left с продължителност 1s.
5. Добавете и transform: rotate(45deg); при :hover. Ако не включите transform в транзишъна, завъртането ще бъде мигновено.
6. Разширете транзишъна, за да обхване и transform, разделяйки свойствата със запетая.

Ключови CSS свойства

• transition – кратък запис за задаване на свойство и продължителност.
• transition-property – указва кое свойство се анимира (напр. left, transform).
• transition-duration – задава времето за анимацията (напр. 1s).
• transform – позволява трансформации като rotate(45deg).