Анимациите в уеб страница могат да привлекат повече потребители. Задайте си това - ако искате да видите уеб страница, която има доста анимация, не бихте ли искали да изследвате повече? Сега, с CSS преходите, можете да оживите работата си с някои страхотни анимации. И, имайте предвид, това трябва да се направи правилно. Нека изследваме света на CSS преходите в следния ред:
- Защо CSS преходи?
- Преходният имот
- Какво трябва да посочите?
- Свойството на функцията за функция за преход-време
- Свойството за забавяне на прехода
Защо CSS преходи?
Нека вземем пример. Ако трябва да промените цвета на елемент от бял на син, тази промяна е почти мигновена. За по-анимиран ефект можете да направите тази промяна постепенно. Това също изглежда доста визуално привлекателно. Като активирате CSS преходите, можете да персонализирате начина, по който се появяват промените. Можете да дефинирате как промените в елементите се появяват на определени интервали от време, които следват кривата на ускорение.
CSS преходите ви позволяват да дефинирате промените за елементи, специфичните интервали от време, скоростта на кривата на ускорение и много други. Можете да направите всичко това, без да използвате Flash или JavaScript .
За по-добро разбиране можете да се обърнете към изображението по-долу:
В изображението по-горе HTML елементът ще се промени от червен на син за една секунда. Ще видите и междинния цвят, когато се извършва преходът. Ако няма да използвате CSS преходи, ще забележите, че промяната в цвета от червен на син става незабавна - няма да видите междинния цвят. При CSS преходите ще забележите анимиран ефект, когато HTML елементите се променят от старото състояние в новото.
Преходният имот
Можете да използвате свойството на стенографския преход, за да контролирате CSS преходите. Използването на тази стенография е не само лесно, но също така може да избегне несинхронизирани параметри, които могат да бъдат доста разочароващи за отстраняване на грешки в CSS.
Свойството за преход указва CSS свойствата, към които искате ефекта на прехода. Само тези CSS свойства са анимирани.
Синтаксис:
преход:
Като начинаещ може да срещнете някои трудности при използването на стенографията. Ако смятате, че използването на стенографията е малко сложно за вас в момента, можете да зададете свойствата на прехода отделно. За HTML елемент можете да посочите свойствата на прехода едно по едно, както е показано в примера по-долу:
div {ширина: 100px височина: 100px фон: lightblue-свойство за преход: width-продължителност на прехода: 2s-функция за преход-време: линейно закъснение на прехода: 1s} div: hover {width: 300px}Задръжте курсора на мишката върху полето
В горния пример ние сме посочили свойствата (свойство на прехода, продължителност на прехода, функция на времето за преход и забавяне на прехода) и техните стойности поотделно. Ще научим за тези преходни свойства скоро.
Какво трябва да посочите?
Има предимно две неща, които трябва да посочите, за да създадете CSS преходи: CSS свойството, което иска да добави ефект, и времевата продължителност на този ефект.Трябва да имате предвид едно нещо - когато не посочите продължителността на времето, преходът ще приеме стойност по подразбиране 0 , и няма да има ефект.
Нека разгледаме пример:
Кодът по-долу определя преходен ефект на свойството width за продължителност от пет секунди.
div {ширина: 100px височина: 100px фон: син преход: ширина 5s} div: hover {ширина: 600px}Преместете курсора над елемента div по-горе, за да видите ефекта на прехода.
sql сървър урок за начинаещи с примери
В горния код ще видите, че когато задържите курсора на мишката върху синьото поле, синьото поле увеличава своята ширина постепенно за продължителност от пет секунди. Също така ще забележите, че когато премахнете курсора от синята кутия, синята кутия ще се върне към първоначалния си размер постепенно (не мигновено). Можете също така да промените стойностите за ширина и продължителност на времето, за да видите как това свойство на прехода влияе на елемента HTML.
Можете също да добавите ефекта на преход към повече от едно свойство. Можете да го направите, като използвате запетаи за разделяне на свойствата. Нека разгледаме пример:
В кода по-долу свойството за преход е посочено за ширина, височина и трансформация.
div {подложка: 15px ширина: 150px височина: 100px фон: зелен преход: ширина 2s, височина 2s, трансформация 2s} div: hover {ширина: 300px височина: 200px трансформация: завъртане (360deg)} Здравей свят (Задръжте над мен)
С горния пример ще видите как се движи зеленото поле, когато задържите курсора на мишката върху полето.
Посочили сме само свойството и продължителността на времето. Нека да видим другите параметри с различни примери.
Свойството на функцията за функция за преход-време
Това свойство определя кривата на скоростта за преходния ефект. Може да приеме следните стойности:
- Лесна стойност: Това е стойността по подразбиране, когато ефектът е бавен в началото, след това по-бърз и завършва бавно.
- Линейна стойност: Този ефект не променя скоростта на прехода - той поддържа скоростта постоянна от началото до края.
- Лесна стойност: Този ефект започва бавно.
- Улеснена стойност: Този ефект има бавен край.
- Стойност на лесно излизане: Този ефект има бавен старт, както и бавен край.
- Стойност на кубически безие (n, n, n, n): Можете да зададете свой собствен набор от стойности във функцията cubic-bezier.
Кодът по-долу показва преходни ефекти за линейни, лекота, лекота, лекота и лекота на излизане.
div {ширина: 100px височина: 100px фон: розов преход: ширина 2s} # div1 {переход-време-функция: линейно} # div2 {преход-време-функция: лекота} # div3 {преход-време-функция: улеснение } # div4 {переход-време-функция: лекота-out} # div5 {преход-време-функция: лекота-излизане} div: hover {ширина: 300px}Задръжте курсора на мишката върху елементите div по-долу
линейна
лекота
лекота
облекчаване
лекота навлизане
Свойството за забавяне на прехода
Понякога искате анимация да се появи след определено време. Свойството за забавяне на прехода ви позволява да посочите забавянето за ефект на преход. Можете да зададете закъснението в секунди.
Да вземем пример, за да видим закъснението в ефекта на прехода:
div {ширина: 100px височина: 100px фон: жълт преход: ширина 3s закъснение на прехода: 1s} div: hover {ширина: 300px}Задръжте курсора на мишката върху елемента div по-долу
Забележка: Можете да забележите, че 1 секунда закъснение преди началото на ефекта
В горния код, когато задържите курсора на мишката върху жълтото поле, ще забележите (за една секунда), че няма ефект. След изчакване от една секунда ще забележите ефекта.
С това стигнахме до края на тази статия за CSS Transitions. Можете да добавяте анимации към своите уеб страници сега. Изпробвайте тези примери.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
sql сървър урок за начинаещи с примери
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „CSS Transition“ и ние ще се свържем с вас.