CSS3 преходиви позволяват да анимирате първоначалната стойност на CSS свойство към нова стойност с течение на времето, като контролирате скоростта, с която се променят стойностите на свойствата. Повечето свойства променят стойностите си за 16 милисекунди, така че препоръчителното време за преход по подразбиране е 200 ms.
Промяната на свойствата става при настъпване на определено събитие, което се описва от съответния псевдоклас. Най-често използваният псевдоклас е: hover. Този псевдоклас не работи мобилни устройствакато iPhone или Android. Универсално решение, което работи в настолни и мобилни браузъри, би било да обработва събития с помощта на JavaScript (например превключване на класове при кликване).
Преходите се прилагат за всички елементи, както и за псевдоелементите :before и :after. За да зададете всички свойства на преход, свойството за преход обикновено е съкратено.
CSS3 преходите може да не се прилагат за всички свойства и техните стойности. Подробен списък можете да намерите на страницата.
Създаване на плавни промени в свойствата на елемента
Поддръжка на браузър
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
сафари: 6.1, 3.1 -webkit-
опера: 12.1, 11.6 -o-
iOS Safari: 7.1
Опера мини: —
Браузър за Android: 4.4, 4.1 -webkit-
Chrome за Android: 44
1. Име на собственост преход-свойство
Съдържа името на свойствата на CSS, към които ще се приложи ефектът на прехода. Стойността на свойството може да съдържа или едно свойство, или списък със свойства, разделени със запетаи. Когато създавате преход, можете да използвате както началното, така и крайното състояние на даден елемент. Имотът не е наследен.
Създадените ефекти трябва да са ненатрапчиви. Не всички свойства изискват плавна промяна във времето, което е свързано с потребителския опит. Например, когато задържим курсора на мишката върху връзка, искаме да видим моментална промяна в цвета на връзката или цвета и стила на подчертаването. Следователно преходите трябва да се използват за тези свойства, към които наистина трябва да привлечете внимание.
Синтаксис
Div (ширина: 100px; свойство на прехода: ширина;) div:hover (ширина: 300px;)
2. Продължителност на прехода продължителност на прехода
Указва времето, през което трябва да се извърши преходът. Ако различните свойства имат различни преходни стойности, те се разделят със запетаи. Ако продължителността на прехода не е посочена, тогава анимацията няма да се появи при промяна на стойностите на свойствата. Имотът не е наследен.
Синтаксис
Div (продължителност на прехода: .2s;)
3. преход-време-функция
Свойството определя времева функция, която описва скоростта, с която даден обект преминава от една стойност към друга. Ако дефинирате повече от един преход за елемент, като например цвета и позицията на фона на елемента, можете да използвате различна функция за всяко свойство. Имотът не е наследен.
| преход-време-функция | |
|---|---|
| Стойности: | |
| лекота | Функцията по подразбиране, преходът започва бавно, ускорява се бързо и се забавя в края. Съвпада с cubic-bezier(0.25,0.1,0.25,1) . |
| линеен | Преходът се извършва равномерно през цялото време, без колебания в скоростта. Съвпада с cubic-bezier(0,0,1,1) . |
| лекота на влизане | Преходът започва бавно и след това постепенно се ускорява в края. Съвпада с cubic-bezier(0.42,0,1,1) . |
| облекчаване | Преходът започва бързо и бавно се забавя в края. Съответства на cubic-bezier(0,0,0.58,1) . |
| лекота на влизане и излизане | Преходът започва бавно и бавно завършва. Съвпада с cubic-bezier(0.42,0,0.58,1) . |
| cubicbezier(x1, y1, x2, y2) | Позволява ръчно да задавате стойности от 0 до 1 за кривата на ускорението. можете да изградите всеки преходен път. |
| начален | Задава стойността на свойство на неговата стойност по подразбиране. |
| наследяват | Наследява стойността на свойството от родителския елемент. |
Синтаксис
Div (функция за преход-време: линейна;)
За по-реалистични анимации използвайте кубичната функция на Безие:
Ориз. 1. Персонализирани кубични функции на Безие от easings.net | потребителско име | Функционална стойност |
|---|---|
| easeInSine | кубичен безие (0,47, 0, 0,745, 0,715) |
| easeOutSine | cubicbezier(0,39, 0,575, 0,565, 1) |
| easeInOutSine | кубичен безие (0,445, 0,05, 0,55, 0,95) |
| easeInQuad | кубичен безие (0,55, 0,085, 0,68, 0,53) |
| easeOutQuad | кубичен безие (0,25, 0,46, 0,45, 0,94) |
| easeInOutQuad | кубичен безие (0,455, 0,03, 0,515, 0,955) |
| easeInCubic | кубичен безие (0,55, 0,055, 0,675, 0,19) |
| easeOutCubic | кубичен безие (0,215, 0,61, 0,355, 1) |
| easeInOutCubic | кубичен безие (0,645, 0,045, 0,355, 1) |
| easeInQuart | кубичен безие (0,895, 0,03, 0,685, 0,22) |
| easeOutQuart | кубичен безие (0,165, 0,84, 0,44, 1) |
| easeInOutQuart | cubicbezier(0,77, 0, 0,175, 1) |
| easeInQuint | кубичен безие (0,755, 0,05, 0,855, 0,06) |
| easeOutQuint | cubicbezier(0,23, 1, 0,32, 1) |
| easeInOutQuint | кубичен безие (0,86, 0, 0,07, 1) |
| easeInExpo | кубичен безие (0,95, 0,05, 0,795, 0,035) |
| easeOutExpo | кубичен безие (0,19, 1, 0,22, 1) |
| easeInOutExpo | cubicbezier(1, 0, 0, 1) |
| easeInCirc | cubicbezier (0,6, 0,04, 0,98, 0,335) |
| easeOutCirc | кубичен безие (0,075, 0,82, 0,165, 1) |
| easeInOutCirc | кубичен безие (0,785, 0,135, 0,15, 0,86) |
| easeInBack | кубичен безие (0,6, -0,28, 0,735, 0,045) |
| easeOutBack | кубичен безие (0,175, 0,885, 0,32, 1,275) |
| easeInOutBack | кубичен безие (0,68, -0,55, 0,265, 1,55) |
4. преход-закъснение
Незадължително свойство, което ви позволява да се уверите, че промяната на свойството не се извършва веднага, а с известно забавяне. Не се предава по наследство.
Синтаксис
Div (преходно забавяне: .5s;)
5. Резюме на прехода
Всички имоти, отговорни за промяната външен виделемент, може да се комбинира в едно свойство на прехода
преход: преход-свойство преход-продължителност преход-време-функция закъснение на прехода;
Ако използваме стойностите по подразбиране, тогава записът
Div (преход: 1s;)
ще бъде еквивалентен
Div (преход: всички 1s улесняват 0s;)
6. Плавен преход на няколко свойства
Можете да посочите няколко последователни прехода за даден елемент, като ги посочите разделени със запетаи. Всеки преход може да бъде формализиран със собствена времева функция.
Div (преход: фон 0,3 s лекота, цвят 0,2 s линеен;)
Div (свойство на прехода: височина, ширина, цвят на фона; продължителност на прехода: 3 секунди; функция за синхронизиране на прехода: леко навлизане, лекота, линеен; )
7. Примери за преходи за различни свойства
Задръжте курсора на мишката над блоковете, за да видите свойствата в действие.
CSS3 ни дава нова красота и удобства. В някои случаи вече не е необходимо да прибягвате до използването на flash и javascript, за да създадете необичаен ефект. CSS свойството за преход е отличен пример за една такава ситуация. Мисля, че всеки знае псевдокласа :hover. С него промените css стойностисвойства на елемент при задържане на курсора на мишката върху него. Например имаше сив блок с черен надпис, задърпате го с мишката и той стана черен с бял надпис.
Ето как е написано:
Blok (размер на шрифта:20px; цвят на фона:#808080; цвят:#000000; ширина:325px; подложка:18px 0; курсор:показател; text-align:center;) .blok:hover (color-на фона:# 000000; цвят: #ffffff; )
И ето как изглежда:
Посочете ме
Можете също така да накарате блока, когато задържите курсора на мишката върху него, освен цвета на фона и цвета на текста, да променя и ширината. За да направите това, напишете CSS кода по следния начин:
Blok1 (font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center;) .blok1:hover (background-color:# 000000; цвят:#ffffff; ширина:355px; )
Ето как би изглеждало в този случай:
Посочете ме
Всичко би било наред, но, както виждате, свойствата променят стойностите си твърде рязко, в един и същи момент, и не изглежда много добре. Какво да правя? Много е просто: използвайте собствеността CSS преход.
За преходния имот
Свойството за преход прави прехода от един стил към друг плавен. Например, цветът на блок при задържане на курсора на мишката върху него няма да се промени рязко, а за определен период от време. Преходът, между другото, преведен на руски означава "преход". Имотът има следния запис:
Div ( преход: цвят 1s 1s линеен; )
Естествено, вместо посочените стойности могат да се използват други стойности. Повечето браузъри все още не разпознават това свойство във формата му по подразбиране, така че трябва да се използват префикси.
Div (преход: цвят 1s 1s линеен; -moz-преход: цвят 1s 1s линеен; -webkit-transition: цвят 1s 1s линеен; -o-преход: цвят 1s 1s линеен; )
В примерите е посочена кратка версия на записа, подробната има следната форма:
Div (transition-property:color; conversion-duration:1s; conversion-delay:1s; conversion-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition -закъснение:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing- функция:линейна; -o-свойство-на-прехода:цвят; -o-продължителност на прехода:1s; -o-закъснение на прехода:1s; -o-функция-време на прехода:линейна; )
AT преход-имотзадава свойството, към което ще се приложи преходното действие. Например: цвят, цвят на фона, ширина, височина, ляво, непрозрачност, видимост и много други. Можете да посочите няколко свойства, разделени със запетаи. Ако искате да приложите преход към всички възможни свойства наведнъж, задайте свойството за преход към всички. AT преход-продължителностпосочете времето, през което ще се извърши преходът, в преход-закъснениевремето, след което ще започне преходът. Функцията за време на прехода определя типа на прехода, нека се спрем на това свойство по-подробно.
Научете повече за функцията за преходно време
Имот преход-време-функцияопределя как ще се променят междинните стойности по време на прехода, с други думи, как скоростта на прехода ще се променя за времето, посочено в свойството продължителност на прехода. Например, преходът може да започне бързо, но да се забави накрая или да не промени скоростта си през цялото време. Функцията за преходно време може да има следните стойности:
- линеен - скоростта на прехода не се променя от началото до края. Еквивалентно на cubic-bezier(0,0,1,1).
- лекота - бавен старт, след това ускоряване и забавяне в края. Еквивалент на кубичен безие (0,25,0,1,0,25,1).
- ease-in - бавен старт. Еквивалент на кубичен безие (0,42,0,1,1).
- ease-out - забавяне в края. Еквивалентно на cubic-bezier(0,0,0.58,1).
- ease-in-out - бавен старт и край. Еквивалент на кубичен безие (0,42,0,0,58,1).
- cubic-bezier(n,n,n,n) - позволява ви да зададете свои собствени стойности от 0 до 1.
Задръжте курсора на мишката върху следващия блок и вижте сами как се извършва преходът с определена функция.
Както можете да видите, в зависимост от това каква стойност има свойството conversion-timing-function, преходът може да се извърши по напълно различни начини. Въпреки че понякога тази разлика не е много забележима, например ако продължителността на прехода е зададена на малка временна стойност или блокът, за който се изпълнява ефектът, има малки размери и т.н.
Примери за използване на свойството преход
За да ви е по-лесно да разберете как да използвате правилно свойството за преход, ето няколко примера. Ще започна, може би, с най-простото. Спомняте ли си блока с промяна на ширината и цвета, когато задържите курсора на мишката върху него в самото начало на публикацията? Нека направим същото нещо сега, само като използваме свойството за преход.
Пример 1
Primer_1 (font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; conversion:all 1s linear; -moz-transition: всички 1s линейни; -webkit-transition:всички 1s линейни; -o-transition:all 1s линейни; ) .primer_1:hover (фонов цвят:#000000; цвят:#ffffff; ширина:355px;)
Посочете ме
Използваният пример линейна функция, ще го използвам по-късно в публикацията. Разбира се, можете да използвате абсолютно всеки. Свойството за преход е зададено на всички, което означава, че всички възможни свойства, а именно цвят на фона, цвят на текста и ширина, променят стойностите си за едно и също време и използват една и съща функция. За да може всяко свойство да се променя по различен начин, трябва да ги напишете разделени със запетаи с различни стойности. Като този:
Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; преход:background-color 1s линеен, цвят 1s 1s лекота навън, ширина 1s 2s лекота; -moz-преход: цвят на фона 1s линеен, цвят 1s 1s лекота навън, ширина 1s 2s лекота; -webkit-преход: цвят на фона 1s линеен, цвят 1s 1s -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; ) .primer_1_1:hover (фонов цвят:#000000; цвят:#ffffff;width:355px;
Посочете ме
В този случай всички свойства променят своите стойности на свой ред, започвайки с цвета на фона и завършвайки с ширината. Всеки имот има своя собствена функция.
Пример 2
Разбрахме цветовете и размерите. Сега нека направим блок, който изчезва в движение.
Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; conversion:all 2s linear; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover (opacity:0; margin-left:50px;)
Посочете ме
С помощ свойства на непрозрачности левият блок се премества и изчезва в рамките на две секунди.
Пример 3
Друг прост пример. Този път текстът има бяла сянка, въпреки че в този случай изглежда по-скоро като подчертаване, отколкото като сянка, но така се нарича свойството.
Primer_3 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; conversion:text-shadow 1s linear; -moz- conversion:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover (text-shadow:0 0 15px #ffffff;)
Посочете ме
Реализирахме това с помощта на свойството text-shadow.
Пример 4
Нека усложним малко задачата, нека накараме блока да се върти.
Primer_4 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; conversion:transform 1.5s linear; -moz-transition :-moz-transform 1.5s 0 линеен; -webkit-transition:-webkit-transform 1.5s линеен; -o-transition:-o-transform 1.5s линеен; ) .primer_4:hover ( трансформация: завъртане (360deg); - moz-transform: завъртане (360deg); -webkit-transform: завъртане (360deg); -o-transform: завъртане (360deg); )
Посочете ме
Съгласете се, изглежда добре и дори няма да познаете веднага, че това е направено само с CSS. В примера, между другото, беше използвано друго ново свойство на трансформация. Много браузъри го четат само с префикси на доставчика. Имайте предвид, че те също трябва да бъдат посочени в стойността на свойството за преход. Не забравяйте да се абонирате, за да научите повече за свойството transform. Скоро на него, както и на много други имоти, ще бъде посветена отделна статия.
Пример 5
Свойството за преход на CSS, между другото, работи добре в комбинация с псевдокласа :active. Блокирайте този примертрябва да се увеличи, когато щракнете и задържите курсора на мишката върху него. Да проверим?
Primer_5 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; conversion:all 2s linear; -moz-transition:всички 2s 0 линейни; -webkit-transition:всички 2s линейни; -o-transition:всички 2s линейни;) .primer_5:active (ширина:375px; височина:85px;)
натиснете и задръжте
За да се приложи този пример, беше необходимо само да се увеличат стойностите на ширината и височината в блока с псевдокласа :active.
Всъщност има много начини да използвате свойството за преход на CSS и съм сигурен, че ще има още повече в бъдеще. Донесох само най-много прости примериза демонстриране на преход в действие. Връзките, между другото, в моя блог променят цвета си, когато задържите курсора на мишката върху тях с помощта на него. Мисля, че съм доста уморен от теб със сивия правоъгълник, но той успя да покаже перфектно всичко, което исках. В комбинация с други свойства и графики, преходите могат да направят някои доста страхотни неща. Опитвам!
Свойството за преход на CSS ви позволява да зададете всички свойства на ефект на преход (преход между две състояния на елемент) в една декларация.
Това свойство е съкратено за следните свойства (списъкът следва реда, в който са посочени стойностите):
Поддръжка на браузър
| Имот | Опера | IExplorer | ръб, край |
|||
|---|---|---|---|---|---|---|
| преход | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -о- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
преход: "продължителност на свойството време-функция забавяне | първоначално | наследяване"; /* е позволено да се посочи ефектът на прехода отделно за всяко свойство в една декларация */ /* синтаксисът ще бъде: свойство | продължителност | функция за време | забавяне,..., собственост | продължителност | функция за време | забавяне */ /* не всички стойности са разрешени, но трябва да следвате реда, показан в горната част на примера */ /* имайте предвид, че ако искате да посочите само забавяне, ще трябва да посочите и продължителност (0 s) */ /* т.е. ако искате да зададете забавяне от 4 секунди, тогава трябва да напишете този преход: 0s 4s; */преход: ширина 2s лекота 100ms, височина 1s линейни 2s, фон 0s 4s; /* Вижте пример в долната част на страницата */Синтаксис на JavaScript:
Object.style.transition = "широчина 3s улесняване 2s"
Стойности на имотите
| Значение | Описание |
|---|---|
| преход-имот | Указва името на CSS свойството, за което трябва да се използва ефектът на прехода. Стойността по подразбиране е всичко. |
| преход-продължителност | Указва колко секунди или милисекунди отнема ефектът на прехода. |
| преход-време-функция | Използва се, за да опише как се изчисляват междинните стойности CSS свойства, което се влияе от ефекта на прехода, докато се използва математическа функция (кубична крива на Безие). Това по същество ви позволява да създадете крива на "ускорение", така че скоростта на прехода да може да се променя по време на продължителността на ефекта на прехода. Стойността по подразбиране е лекота. |
| преход-закъснение | Указва кога ще започне ефектът на прехода (действа като забавяне за началото на ефекта). Стойността по подразбиране е 0 секунди. |
| Задава свойство на стойността му по подразбиране. | |
| Указва, че стойността е наследена от родителския елемент. |
CSS версия
CSS3Наследени
Не.Анимиран
Не.Пример за употреба
Пример за плъзгащо се търсене в CSS, използвайки селектор на атрибути (с посочената стойност) и генеричното свойство на прехода:
Преходът е плавна промяна в свойствата на елемент, когато задържите курсора на мишката върху него. С псевдо-класа :hover промяната е мигновена, докато преходът ви позволява да зададете продължителността и метода на прехода.
Да започнем с един прост пример. Имаме няколко снимки, всяка от които трябва да се завърти с малък ъгъл, когато курсорът се задържи върху нея (пример 1).
Пример 1: Прилагане на преход
Веднага щом преместим курсора върху което и да е изображение, той плавно се завърта на 15 градуса наляво (фиг. 1).
Ориз. 1. Гладко завъртане на изображението
В стиловете за :hover задаваме желаните промени на елементите при задържане. Самият преход се добавя към стиловете на елемента чрез свойството за преход. Има четири параметъра - едно или повече свойства, времетраене на анимацията, времева функция и времезакъснение преди анимацията.
Имоти
По подразбиране всички свойства, посочени в :hover, са анимирани. Понякога някои свойства трябва да се анимират, а други не. В този случай всички желани свойства трябва да бъдат разделени със запетая при преход.
Преход: трансформиране, граница 1s;
Продължителност на анимацията
Това е времето, през което ще продължи движението. Указва се както в секунди (1s, 0,5s), така и в милисекунди (100ms).
Забавяне на анимацията
Не е необходимо движението да започне веднага, приемливо е да добавите малко забавяне в началото, след края на определеното време анимацията ще започне незабавно.
Времева функция
Анимацията може да се осъществи по различни начини. Например, започнете бавно в началото на движение и ускорете в края или обратното. Има много опции и те създават всякакви интересни ефекти. Скоростта на анимацията се контролира от специална функция, свързваща времето и движението. Ето как изглежда на графиката (фиг. 2).
Ориз. 2. Тип времева функция
Началната точка има координати 0.0, 0.0, крайната точка - 1.0, 1.0, докато функцията по ординатната ос може да надвишава тези стойности нагоре или надолу. В резултат на това ще изглежда, че елементът първо се движи в обратната посока, а след това в желаната посока. Така можете да създадете ефект на отскок или инерция. Ето най-популярните стойности на времевата функция.
- лекота - анимацията започва бавно, след това се ускорява и отново се забавя към края на движението.
- ease-in - анимацията започва бавно и се ускорява към края.
- ease-out - анимацията започва бързо, забавя се към края.
- ease-in-out - анимацията започва и свършва бавно.
- линейно - еднаква скорост от началото до края.
В пример 2 се използва преход за плавно плъзгане на панела от зад левия ръб на екрана, когато курсорът на мишката е поставен върху него.
Пример 2: Използване на функцията време
Ако имате въпроси относно този код, моля, обадете ми се на 555-3298.В този пример има много стилови свойства, но те са предназначени само за създаване на желания дизайн. Анимацията при преместване на мишката се извършва с две свойства - shift задава параметрите на анимацията, а left е свойство, чиято стойност се променя плавно във времето (в този случай в рамките на една секунда). Първоначално ляво е -320px и по-голямата част от панела е скрита зад левия край на браузъра, само малка част се вижда. Тогава лявото става нула и по този начин целият панел става видим.
В стиловете е позволено да добавяте няколко прехода наведнъж с различни свойства и ефекти, което ви позволява да разнообразите преходите. Пример 3 показва как да създадете бутон, който плавно променя цвета на фона, рамката и етикета. В този случай анимацията на текста е различна от анимацията на други части.