CSS3 átmenetek. Több tulajdonság sima átmenete

Internet böngésző. Eddig nem támogatja az ingatlanátmenetet.

A Firefox 4 konzol -moz-.

A Chrome és a Safari előtag-webkit.

Az Opera előtag -o-t igényel.

Hogyan működik?

A CSS3 átmenetek olyan hatások, amelyek lehetővé teszik, hogy az elem simán megváltoztassa az egyik stílust a másikra.

Ehhez két dolgot kell megadnia:

• Adja meg a CSS tulajdonságot, amelyhez hozzá szeretne adni.
• Meghatározza a hatás időtartamát.

Példa A szélességi tulajdonság átmeneti hatása, Időtartam: 2 másodperc: Div { Átmenet: Szélesség 2S; -Moz-átmenet: szélesség 2s; / * Firefox 4 * / -Webkit-átmenet: Szélesség 2s; / * Safari és Chrome * / -O-átmenet: szélesség 2s; / * Opera * / }

Megjegyzés: Ha az időtartamot nincs megadva, a zökkenőmentes átmenet nem történik meg, mert az alapértelmezett érték 0.

A hatás akkor kezdődik, amikor a megadott CSS-tulajdonságok megváltoznak. Általában az átmeneti hatás ( sima változás CSS tulajdonságok) nyakkendő, amikor a felhasználó áthelyezi az egeret az elem felett:

Példa Adja meg: Hover az elemek számára : Megjegyzés: Amikor az egér kurzor elhagyja az elem területét, simán változik vissza az eredeti stílusához. Több változás Effektus hozzáadása egynél több stílus, adjon meg több tulajdonságot, elválasztva őket vesszővel: Példa A szélesség, a magasság és az átalakulás hatásainak hozzáadása: Az átmenet tulajdonságai Az alábbi táblázat felsorolja az összes tulajdonság átmenetét: Ingatlan Leírás CSS. Átmenet. Stenographic (rövidített) tulajdonság a négy átmeneti tulajdonságok egy ingatlanban történő telepítéséhez 3 Átmeneti tulajdonság. Megadja a CSS tulajdonságok, amelyekre az átmenet alkalmazandó 3 Átmeneti időtartam. Meghatározza, hogy mennyi ideig tart az átmenet. Alapértelmezett érték 0 3 Átmeneti időzítés Leírja, hogy az átmenet sebesség megváltozik. Az alapértelmezett érték "könnyebb" 3 Átmeneti késleltetés. Meghatározza, hogy mikor kezdődik az átmenet. Az alapértelmezett érték 0 3 Az alábbi két példa meghatározza az összes átmeneti tulajdonságot: Példa Az összes átmeneti tulajdonság használata egy példában: div { Átmeneti tulajdonság: szélesség; Átmeneti időtartam: 1s; Átmeneti időzítés funkció: lineáris; Átmenet késleltetés: 2S; Moz-átmeneti tulajdonság: szélesség; -Moz-átmenet-időtartam: 1s; -Moz-átmenet-időzítés funkció: lineáris; -Moz-átmenet-késleltetés: 2S; / * Safari és Chrome * / -Webkit-átmenet-tulajdonság: szélesség; -Webkit-átmenet-időtartam: 1s; -Webkit-átmenet-időzítési funkció: lineáris; -Webkit-átmenet-késleltetés: 2S; / * Opera * / -O-átmeneti tulajdonság: szélesség; -O-átmeneti időtartam: 1s; -O-átmeneti időzítés funkció: lineáris; -O-átmenet-késleltetés: 2S; }

Hozzáadott dátum: 2011-10-16



Ingatlan Átmenet. Az új CSS3 tulajdonságokra utal. Ismerje meg vele közelebb.

Mindannyian megszoktuk, hogy amikor lebegítjük az egér megváltoztatását a link színét. Ebben az esetben a szín drámaian változik, sima átmenet nélkül. Ingatlan Átmenet. Lehetővé teszi, hogy hozzáadjon egy kis animációt, ha a szín megváltozik a JavaScript használat nélkül.

Ennek a tulajdonságnak a specifikációja a következőket állapítja meg:

A CSS-átmenetek lehetővé teszik a CSS-értékek ingatlanváltozását, hogy egy meghatározott időtartam alatt zökkenőmentesen forduljanak elő.

Más szavakkal, a CSS-átmenetek lehetővé teszik, hogy a CSS tulajdonságai zökkenőmentesen és egy ideig megváltozzanak.

Alkalmazza az ingatlant Átmenet. Lehetséges bármi - háttér, szín, hossz, betűméret stb. Ezek elsősorban olyan tulajdonságok, amelyek a hosszúságú (PX, EM, EX) vagy százalékos egységben kifejezhetők színt vagy tulajdonságokat állítanak be. Eseményként használhatjuk a pszeudoklasszát is: Focus és: Aktív.

Böngészők

Rögtön mondom a böngészőkről - Új szabvány még nem fogadta el ebben a pillanatban Az előtagok használata - webkit-, -moz- és -o-. Úgy tűnik, hogy az ingatlan támogatott. chrome böngészők, Safari, Opera 10.5+, Firefox 4+. A "Kedvenc" Internet Explorer, mint mindig nem működik, a felhasználó egyszerűen nem fog látni az animációt.

Ebben a cikkben használtam az előtagot -Webkit-Tehát az itt megadott példák csak Chrome-ban és Safariban fognak működni.

Vegyünk egy egyszerű példát - adjunk hozzá egy sima átmeneti háttér linket

Ismerje meg, ne felejtsük el, hogy a színes hivatkozás szokásos változása akkor történik, amikor az egér lebeg.

Most használjuk a CSS tulajdonságot Átmenet. A háttér zökkenőmentes eltolódásához a linkkel. Hozzon létre egy új osztályt, amely megegyezik az osztálygal egyszerű. És adjon hozzá néhány új vonalat:

A.Cool (kitöltés: 5px 10px; Háttér: # 69F; color: # 000; -WebKit-Transition-tulajdon: Background; -WebKit-Transition-Időtartam: 0.5s; -WebKit-Transition-Timing-Function: Könnyű,) A.Cool: Hover (háttér: # 33f, szín: # #FFF;)

Hozzon létre egy pár több teszt linket, és nézze meg az eredményt:

Most a hátterünk zökkenőmentesen megváltoztatja a színt egy fél tál! A példából láthatjuk, hogy három új vonalat adtunk hozzá a tulajdonságokkal. -Webkit-átmenet-tulajdonság, -webkit-átmenet-időtartam, -webkit-átmenet-időzítés funkció.

Tény, hogy egy tulajdonsággal kombinálhatók:

Webkit-átmenet: Háttér 0,5S könnyebb;

A sima szöveges színváltozást is hozzáadhat:

A.Cool2 (kitöltés: 5px 10px; Háttér: # 69F; color: # 000; -Webkit-Transition: Háttér 0.5s Könnyű, színes 1,0 mp Könnyű,) A.Cool2: hover (Háttér: # 33F szín: #fff ;)

Ez a kód az egér lebegésénél simán megváltoztatja a háttérszínt a hemissecond alatt és a betűtípus színe 1 másodpercig. Jelölje be:

Ha ugyanazokat a paramétereket használjuk az animációhoz, használhatja a kifejezést: -webkit-átmenet: mindegyik 0,5S könnyebb;

Most az átmeneti hatás az összes változó tulajdonságra vonatkozik, ugyanolyan paraméterekkel - 0,5 másodperc, könnyedén.

Hozzáadhat egy késedelmet is Átmeneti késleltetés.:

A.Cool3 (Padding: 5px 10px, háttér: # 69f; szín: # 000, -webkit-átmenet: mind a 0,5s könnyebb; Szín: # #FFF;)

Most az animáció az egér vezetése után fél másodpercen keresztül fog működni. Ellenőrizze, csak abban az esetben:

Háttérasztal

Ahhoz, hogy jobban asszimilálja az anyagot, hozza a figyelmet egy kis referenciajelzést.

Átmeneti tulajdonság tulajdonság, amelyre animációt alkalmaz. Gyakorlatilag minden tulajdonság CSS: szín, háttér, szélesség, betűméret stb. Az animáció átmeneti időtartama. Idő másodpercben. Átmeneti időzítés-függvény ideiglenes funkció az animációhoz: Könnyű, lineáris, könnyedén ki-, könnyű, könnyebb, kubikus-bezier átmeneti késleltetési késleltetés. Idő másodpercben.

A CSS átmeneti tulajdonságra van szükség az animáció átmenet telepítéséhez egyik államról a másikra. Animáció működik a pszeudo-elemekkel: Hover és: Aktív, azaz azaz. Amikor az objektum az egyik államról a másikra mozog.

CSS Átmeneti szintaxis

Átmenet: [nincs | ] || || || ;

A szintaxis jól néz ki, de minden egyszerű. Nézzük meg az egyszerű példákat, ahogy működik. Két példa után mindegyik szintaxiselemet szétszereljük:

Példák az átmeneti tulajdonsággal

1. példa. Animáció HTML-ben átmeneten keresztül

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

• all - ко всему объекту (можно опустить, если задано время)
• color - к цвету текста
• background - к цвету фона объекта
• width , height - к изменению габаритов по ширине и высоте соответственно
• none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration : 1s ;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function

transition-timing-function : value ;

Где value может принимать значения:

• ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
• step-start - мгновенный старт, равносильно параметру steps(1, start)
• step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
• cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
• steps(a,b) - изменение рывками

Например

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

• -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform-origin - для Chrome, Safari, Android и iOS
• -o-transform-origin - для Opera до версии 12.10
• -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

document.getElementById("elementID").style.transition

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс:hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

Blok { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok:hover { background-color:#000000; color:#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; color:#ffffff; width:355px; }

Вот, как это будет выглядеть в данном случае:

Наведи на меня

Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition .

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

Div { transition:color 1s 1s linear; }

Вместо указанных значений естественно можно применить и другие. Большинство браузеров до сих пор не воспринимают данное свойство в его стандартном виде, поэтому необходимо использовать префиксы.

Div { transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; }

В примерах был указан короткий вариант записи, подробный имеет следующий вид:

Div { transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition-delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; }

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:

• linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
• ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
• ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
• ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
• ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.

Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

Primer_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; } .primer_1:hover { background-color:#000000; color:#ffffff; width:355px; }

Наведи на меня

В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:

Primer_1_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; } .primer_1_1:hover { background-color:#000000; color:#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; transition: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; }

Наведи на меня

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

Primer_3 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz-transition: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; transition:transform 1.5s linear; -moz-transition:-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; } .primer_4:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }

Наведи на меня

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на , чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом:active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

Primer_5 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_5:active { width:375px; height:85px; }

Нажми и держи

Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом:active.

Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!