Как да използвате параметъра за преход CSS3
Параметърът за преход е важна нова функция в CSS. Може да се използва за създаване на динамични ефекти, приложени към div или класове, като се използва проста структура:
Преходът в CSS3 е чудесен начин да добавите малко анимация към вашия сайт, без да се налага да го запълвате с javascript библиотеки като jQuery.
Преди да започнем, нека да разгледаме демонстрация на параметъра за преход в действие.
На първо място, за да работи тази опция, трябва да използваме опциите по подразбиране. Очевидно двата най-често използвани параметъра са ширина и височина. За да използвате параметъра самостоятелно, можете да използвате това:
За да продължим, след като параметърът е дефиниран, можем да посочим начална и крайна стойност. В случай, че това са стойностите на ширината или височината, трябва да зададете първоначалните стойности на параметъра, а след това крайните, които трябва да бъдат различни.
Например, тук приложихме параметъра за преход към ширината и след това посочихме първоначалната стойност на ширината, а след това посочихме крайната стойност на ширината (която се прилага, когато задържите курсора на мишката върху елемента:
Сега, след като сме определили как ще се трансформират параметърът и началните/крайните стойности, трябва да определим продължителността на прехода. Това се прави чрез указване на дължината в секунди или милисекунди, както е показано по-долу:
Този пример генерира следния код:
Това означава, че div на mainheader ще се разшири с 250px за 0,5 секунди.
Този код е достатъчен, за да създаде хубав ефект, но все пак можем да направим крачка напред и да използваме параметъра за преход CSS3 с функцията за синхронизиране. С тази опцияще можем да променим стойностите в момента на възпроизвеждане на прехода. Параметърът за преход по подразбиране е зададен на линейна крива. Можете обаче да изложите функции за омекотяване, кубична крива на Безие и др. Кубичната крива на Безие ви позволява да дефинирате свои собствени стойности, като използвате (n,n,n,n), където n може да бъде от 0 до 1 (например линейната може да бъде (0,0,1,1)).
Използването на този код в нашия пример ще ни даде следното:
Освен това, подобно на продължителността на прехода, прилагането на параметъра за забавяне на прехода ще ни помогне да зададем забавяне преди началото на ефекта:
И накрая, когато използвате опцията за преход CSS3, важно е да имате предвид две неща. Първо, в момента за повечето браузъри е необходимо да посочите префикси на браузъра (с изключение на браузърите IE10, Opera и Firefox 16+):
-moz-transition: за Firefox 15 -webkit-transition: за Chrome и Safari
(имайте предвид, че IE9 и по-стари версии изобщо не поддържат опцията за преход).