CSS transform property - CSS трансформация, Всичко за уеб дизайнер и програмист
Свойството за преход на CSS3 ви позволява да анимирате прехода от една стилова стойност на елемент към друга. Свойството за преход е полезно, когато трябва да добавите различни визуални ефекти за преход към елемент, но искате да се ограничите до CSS стилове без флаш анимации и скриптове.
| Не |
| Не |
| всички елементи, :before и :after псевдоелементи |
| Не |
| Internet Explorer 10+ (-ms), Chrome 1+ (-webkit), Opera 10.5+, Safari 3+ (-webkit), Firefox 1+ (-moz) |
| CSS 3 |
ДЕМО Първият пример е плавна промяна във височината на блоков елемент за 1 секунда
същото може да се направи, за да промените ширината
Ако не посочите продължителността на ефекта за продължителност на прехода, тогава преходът ще бъде незабавен, тъй като стойността за продължителност по подразбиране е 0. Но стойността по подразбиране за свойството за преход е all, така че ако не го посочите, тогава всички промени в стила ще бъдат анимирани (пример 3). Анимацията започва само след промяна на свойствата на обекта чрез псевдо-класове. В примера по-долу задържането на мишката над блоковете ( div:hover ) променя размера им
След като курсорът на мишката напусне блоковете, те приемат оригиналната си форма, което означава, че свойствата им приемат същите стойности. Възможно е също отделно да зададете параметрите на анимацията за промяна на свойствата на даден обект и за връщането им в първоначалното им състояние. В примера по-долу ширината на блока при задържане на курсора на мишката над него се увеличава за половин секунда исе връща в първоначалното си състояние за 3 секунди.
За да добавите ефект на преход за повече от един стил, просто трябва да ги изброите всички в стойността на прехода, разделени със запетаи
И накрая, нека да разгледаме това свойство на CSS3 преход, което все още не сме използвали. transition-timing-function - описва как ще бъдат изчислени междинните стойности на прехода от началната позиция (състояние) към крайната. Или, с други думи, как ще се променя скоростта на прехода в зависимост от неговата продължителност. Функцията transition-timing-function може да приема една от следните стойности:
улесняване на бързия преход; линеен преход; лесен плавен старт; успокояващ се гладък край; плавно начало и край с лекота на влизане и излизане; cubic-bezier зависи от ръчно въведени стойности (cubic-bezier(x1,y1,x2,y2)).
В примери 6-11 можете да видите всички стойности на това свойство в действие.