Съдържание
Преходите принадлежат към нова поредица от ефекти, които са включени в HTML5 и това може да се регулира с CSS3Преди това този тип ефекти трябваше да се изпълняват от Javascript, като се използва една от многото налични библиотеки и рамки (Mootools, Jquery и др.), Но при въвеждането на новия стандарт такива ефекти бяха включени, като например преходи, анимации, трансформации …Използване на преходи
Преди да видим как да използваме преход, трябва да знаем какво представлява той. Знаем, че когато прилагаме промяна със собствеността : hover когато задържите мишката върху елемента, той веднага приема стила, присвоен, когато мишката е над него, преходът не е нищо повече от контрол върху това как ще се извърши тази промяна, тоест продължителността на промяната, скоростта при което ще бъде извършено, за да се постигне ефект като смес между старото и новото състояние.
Тогава можем да обобщим, че преходът е преминаването от едно състояние в друго в рамките на HTML документа и всички свойства, с които може да се направи тази промяна, на следващото изображение виждаме начално състояние и крайно състояние, преходът е това, което се случва Между двете.
УвеличетеСвойства на прехода
Нека да видим свойствата и атрибутите, които можем да използваме за преход:
- преход-забавяне: Указва закъснение в единица време, след което приложението за ефект ще започне.
- продължителност на прехода: Определя времето, през което трябва да се извърши преходът.
- преходен имот: Указва към кое свойство трябва да се приложи преходът.
- функция за преход-време: Определя начина, по който междинните стойности ще бъдат третирани по време на изпълнението на прехода.
- преход: Това е пряк път, с който можем да приложим всички свойства на прехода в една CSS декларация. Може да се обобщи по следния начин: преход:
Нека да видим пример за това как да направите преход за елемент в HTML5, нека видим следния код:
ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Както виждаме, ние сме реализирали различните свойства на преходния елемент, използвайки префикса -вебкит, това ни уверява, че ще бъде изпълнено за браузърите Chrome Y Сафари, за да ги приложите за Firefox Y Опера трябва да включим и префиксите -moz и -o.
Можем също да забележим, че сме задали забавяне в 100ms, което означава, че ще има малко забавяне преди началото на прехода, тогава цялата продължителност на ефекта трябва да продължи 500ms, което е установено в продължителност.
Нека видим изображение с всички фази на ефекта:
УвеличетеКакто виждаме, преходът прави ефекта да се прилага постепенно през определеното време.
С това завършваме урока за това как да приложим ефекта на прехода към елемент в HTML5, трябва да продължим да практикуваме, докато стане естествено да поставим необходимия код, така че нашите документи и страници да постигнат по -голяма динамика.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
