Příklady přechodu css3. CSS3 - přechody. Název vlastnosti přechod-vlastnost

CSS přechody poskytují způsob, jak ovládat rychlost animace při změně vlastností CSS. Místo toho, aby se změny vlastností projevily okamžitě, můžeš způsobit, že změny ve vlastnosti proběhnou po určitou dobu. Pokud například změníte barvu prvku z bílé na černou, změna je obvykle okamžitá. S povolenými přechody CSS dochází ke změnám v časových intervalech, které sledují křivku zrychlení, přičemž všechny lze přizpůsobit.

Často se nazývají animace, které zahrnují přechod mezi dvěma stavy implicitní přechody protože stavy mezi počátečním a konečným stavem jsou implicitně definovány prohlížečem.

Přechody CSS vám umožňují rozhodnout, které vlastnosti chcete animovat (podle jejich výslovný seznam), kdy se animace spustí (nastavením a zpoždění), jak dlouho bude přechod trvat (nastavením a doba trvání), a jak bude přechod probíhat (definováním a funkce časování, např. lineárně nebo rychle na začátku, pomalu na konci).

Které vlastnosti CSS lze převést?

Autor webu může definovat, která vlastnost má být animována a jakým způsobem. To umožňuje vytváření složitých přechodů. Protože nemá smysl některé vlastnosti animovat, je seznam animovatelných vlastností omezen na konečnou množinu.

Poznámka: Sada vlastností, které lze animovat, se mění s vývojem specifikace.

Auto hodnota je často velmi složitý případ. Specifikace doporučuje neprovádět animaci z a do auto . Někteří uživatelští agenti, jako ti, kteří jsou založeni na Gecko, implementují tento požadavek a jiní, jako ti, kteří jsou založeni na WebKitu, jsou méně přísní. Použití animací s automatickým nastavením může vést k nepředvídatelným výsledkům v závislosti na prohlížeči a jeho verzi a je třeba se mu vyhnout.

Definování přechodů

Přechody CSS se ovládají pomocí vlastnosti přechodu zkratky. Toto je nejlepší způsob, jak nakonfigurovat přechody, protože to usnadňuje vyhnout se nesynchronizovaným parametrům, což může být velmi frustrující, když musíte strávit spoustu času laděním v CSS.

Jednotlivé součásti přechodu můžete ovládat pomocí následujících dílčích vlastností:

(Všimněte si, že tyto přechody se nekonečně zacyklí pouze pro účely našich příkladů; přechody CSS pouze vizualizují změnu vlastnosti od začátku do konce. Pokud potřebujete vizualizace, které se zacyklí, podívejte se na vlastnost animace CSS.)

transition-property Určuje název nebo názvy vlastností CSS, na které se mají použít přechody. Během přechodů jsou animovány pouze vlastnosti zde uvedené; změny všech ostatních vlastností probíhají okamžitě jako obvykle. transition-duration Specifikuje dobu, po kterou by měly nastat přechody. Můžete zadat jedno trvání, které se vztahuje na všechny vlastnosti během přechodu, nebo více hodnot, abyste každé vlastnosti umožnili přechod v jiném časovém období.

doba přechodu: 0,5s

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit- přechodová vlastnost: šířka výška background-color font-size left top transform -webkit-transform color; -Trvání-přechodu webkitu: 0,5s; -funkce-webkit-transition-timing: easy-in-out; přechodová vlastnost: šířka výška barva pozadí velikost písma vlevo nahoře transform -webkit-transform color; doba trvání přechodu: 0,5 s; přechod-časování-funkce: easy-in-out; ) .box1( transformace: otočit (270 stupňů); -webkit-transform: otočit (270 stupňů); šířka: 50px; výška: 50px; barva pozadí: modrá; barva: žlutá; velikost písma: 18px; vlevo: 150px; nahoře : 25px position: absolute-webkit-transition-property: width height background-color left top transform -webkit-transition-duration: 0.5s transition-property: width height background-color font; -velikost vlevo nahoře transform -webkit-transformv color: 0,5s; přechod-časování-funkce: easy-in-out ) funkce updateTransition ) ( var el = document.querySelector("div.box"); el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el ) var intervalID = window.setInterval(updateTransition, 7000 );

doba přechodu: 1s

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška barva pozadí velikost písma vlevo nahoře -barva přechodu webu: 1s vlevo nahoře transformační barva: přechod-načasování-vypnutí ) .box1( transformace: otočení(270 stupňů); -webkit-transform: otočení(270 stupňů); šířka: 50px; barva pozadí: modrá; velikost písma : 150px position: absolute size left top -webkit-transform transform color; font-size left top transform - webkit-transform color; doba trvání přechodu: 1 s; přechod-časování-funkce: easy-in-out; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

doba přechodu: 2s

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-property: šířka výška barva pozadí-velikost písma vlevo nahoře transform -webkit-transform color; -webkit-transition-duration: 2s -webkit-transition-timing-function: easy-in-out; -velikost vlevo nahoře transform -webkit-transform color: přechod-in-out ) .box1( transformace: rotace(270 stupňů); -webkit-transform: rotace(270px); šířka: 50px; barva: žlutá; font-size: 150px position: absolute-color font-size left top transform -webkit-transform-duration: 2s -webkit-transition-timing-function: easy-in-out; šířka výška background-color font- size left top transform -webkit-transform color; doba trvání přechodu: 2 s; přechod-časování-funkce: easy-in-out; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

doba přechodu: 4s

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-property: šířka výška barva pozadí-velikost písma vlevo nahoře transform -webkit-transform color; -webkit-transition-duration: 4s -webkit-transition-timing-function: easy-in-out; -velikost vlevo nahoře transform -webkit-transform color: přechod-in-out ) .box1( transformace: rotace(270 stupňů); -webkit-transform: rotace(270px); šířka: 50px; barva: žlutá; font-size: 150px position: absolute-color font-size left top transform -webkit-transform-duration: 4s -webkit-transition-timing-out; šířka výška background-color font- size left top transform -webkit-transform color; doba trvání přechodu: 4s; přechod-časování-funkce: easy-in-out; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

funkce časování přechodu Určuje funkci, která definuje způsob výpočtu mezilehlých hodnot vlastností. Časovací funkce určit, jak se vypočítávají mezilehlé hodnoty přechodu. Většinu časovacích funkcí lze specifikovat poskytnutím grafu odpovídající funkce, jak je definováno čtyřmi body definujícími kubický Bézier. Můžete si také vybrat náběh z náběhu z Cheat Sheetu funkcí Easing.

přechod-časování-funkce: snadnost

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška barva-barva-fontu vlevo nahoře barva-funkce přechodu-přechodu: šířka výška-barva-fontu vlevo nahoře přechod-doba; -funkce časování: snadnost) .box1( šířka: 50px; výška: 50px; barva pozadí: modrá; barva: žlutá; velikost písma: 18px; vlevo: 150px; nahoře: 25px; -webkit-transition-property: width výška background-color-size left top color -webkit-transition-timing: width; background-color font-size left horní barva přechodu-časování: snadnost ) function updateTransition() ( var el = document.querySelector(; "div.box" if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

funkce časování přechodu: lineární

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-property: šířka výška barva pozadí-velikost písma vlevo nahoře barva -webkit-transition-duration: 2s; color; transition-duration: 2s; transition-timing-function: linear .box1( width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; ; pozice: absolutní-vlastnost-webkit: šířka-barva-velikost vlevo nahoře barva; barva vlevo nahoře: 2s; funkce přechodu-časování: linear; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

přechod-časování-funkce: krok-konec

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška barva-barva-fontu vlevo horní barva: -webkit-transition-timing-function: step-end width height-color font-size left-duration: 2s; -function: step-end .box1( width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position: absolute; -webkit-transition -vlastnost: šířka výška barva pozadí-velikost písma vlevo horní barva -funkce přechodu-webu: přechod-konec : šířka výška-barva-fontu vlevo nahoře barva: 2s; function: step-end function updateTransition() ( var el = document.querySelector("div.box "); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

přechod-časování-funkce: kroky(4, konec)

Lorem
.parent ( width: 250px; height:125px;) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška-barva-fontu vlevo nahoře barva -webkit-transition-duration: 2s -webkit-transition-timing-function: steps(4, end-size left top color; trvání: 2s; přechod-časování-funkce: kroky(4, konec .box1( šířka: 50px; výška: 50px; barva pozadí: modrá; barva: žlutá; velikost písma: 18px; nahoře: 25px; -webkit); -transition-property: šířka výška pozadí-barva -webkit-transition-timing -function: steps(4, end): šířka výška background-color font-size left top color: steps(); 4, end ) function updateTransition(); ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) return el; ) var intervalID = window.setInterval(updateTransition, 7000);

transition-delay Definuje, jak dlouho se má čekat mezi změnou vlastnosti a skutečným zahájením přechodu.

přechodové zpoždění: 0,5s

Lorem
.parent ( width: 250px; height: 125px; ) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška barva pozadí-velikost písma vlevo nahoře barva -webkit-přechod-časování: 2s; delay: 0.5s; transition-timing-function: linear; šířka výška background-color -webkit-transition-duration: -webkit-transition-time: lineární šířka výška-barva-fontu vlevo nahoře barva; ; funkce časování přechodu: lineární; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

přechodové zpoždění: 1s

Lorem
.parent ( width: 250px; height: 125px; ) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška-barva-fontu vlevo nahoře barva; -webkit-transition-duration: 2s; : 1s; přechod-časování-funkce: lineární; šířka: 50px; výška: 50px; barva pozadí: modrá; barva: žlutá; velikost-písma: 150px; pozice: absolutní; -webkit-transition-property: šířka výška: background-color -webkit-transition-duration: webkit-transition-delay: 1s -webkit-transition-timing-function: width height background-color font-size left top color: 1s; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

přechodové zpoždění: 2s

Lorem
.parent ( width: 250px; height: 125px; ) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-vlastnost: šířka výška-barva-fontu vlevo nahoře barva; -webkit-transition-duration: 2s; : 2s; přechod-časování-funkce: lineární; šířka: 50px; výška: 50px; barva pozadí: modrá; barva: žlutá; velikost písma: 150px; pozice: absolutní; -webkit-transition-property: šířka výška: background-color -webkit-transition-duration: webkit-transition-delay: 2s -webkit-transition-timing-function: width height background-color font-size left top color: 2s; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

přechodové zpoždění: 4s

Lorem
.parent ( width: 250px; height: 125px; ) .box ( width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit- přechod-property: šířka výška barva pozadí-velikost písma vlevo nahoře barva -webkit-transition-duration: 2s -webkit-transition-timing-function: easy-in-out; vlevo nahoře barva: 4s přechod-časování: barva-nahoru: 150px šířka-barva-nahoru; ; -transition-duration: 2s; přechod-zpoždění: 4s; přechod-časování-funkce: easy-in-out; ) funkce updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box" ) return el ) var intervalID = window.setInterval(updateTransition, 7000);

Zkrácená syntaxe CSS je napsána takto:

Div (přechod: ; }

Příklady

Jednoduchý příklad

Tento příklad provádí čtyřsekundový přechod velikosti písma s dvousekundovým zpožděním mezi okamžikem, kdy uživatel najede myší na prvek, a začátkem efektu animace:

#delay ( font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; ) #delay:hover ( font-size: 36px; )

Příklad více animovaných vlastností

Obsah HTML

Pole níže kombinuje přechody pro: šířku, výšku, barvu pozadí, transformaci. Umístěním ukazatele myši na pole zobrazíte tyto vlastnosti animované.

Vzorek

Obsah CSS

.box ( border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; přechod: šířka 2s, výška 2s, barva pozadí 2s, transformace 2s; ) .box:hover ( barva pozadí: #FFCCCC; šířka: 200px; výška: 200px; transformace: otočit (180 stupňů); )

Když jsou seznamy hodnot vlastností různé délky

Pokud je seznam hodnot některé vlastnosti kratší než ostatní, její hodnoty se opakují, aby se shodovaly. Například:

Div ( vlastnost přechodu: neprůhlednost, vlevo, nahoře, výška; trvání přechodu: 3 s, 5 s; )

S tím se zachází, jako by to bylo:

Div ( vlastnost přechodu: neprůhlednost, vlevo, nahoře, výška; trvání přechodu: 3 s, 5 s, 3 s, 5 s; )

Podobně, pokud je seznam hodnot jakékoli vlastnosti delší než seznam pro přechod-property , bude zkrácen, takže pokud máte následující CSS:

Div ( vlastnost přechodu: neprůhlednost, vlevo; trvání přechodu: 3 s, 5 s, 2 s, 1 s; )

To se interpretuje jako:

Div ( vlastnost přechodu: neprůhlednost, vlevo; trvání přechodu: 3 s, 5 s; )

Použití přechodů při zvýrazňování nabídek

Běžným použitím CSS je zvýraznění položek v nabídce, když na ně uživatel najede kurzorem myši. Je snadné použít přechody, aby byl efekt ještě atraktivnější.

Než se podíváme na úryvky kódu, možná se budete chtít podívat na živé demo (za předpokladu, že váš prohlížeč podporuje přechody).

Nejprve nastavíme nabídku pomocí HTML:

Poté vytvoříme CSS pro implementaci vzhledu a chování našeho menu. Příslušné části jsou uvedeny zde:

A ( barva: #fff; barva pozadí: #333; přechod: zmírnění všech 1 s; ) a:hover, a:focus ( barva: #333; barva pozadí: #fff; )

Tento CSS určuje vzhled nabídky, přičemž barvy pozadí a textu se mění, když je prvek ve stavu :hover a :focus.

Příklady JavaScriptu

Při použití přechodu ihned po:

  • přidání prvku do DOM pomocí .appendChild()
  • odstranění zobrazení prvku: none; property.

S tím se zachází, jako by počáteční stav nikdy nenastal a prvek byl vždy ve svém konečném stavu. Snadný způsob, jak překonat toto omezení, je použít window.setTimeout() v délce několika milisekund před změnou vlastnosti CSS, na kterou chcete přejít.

Použití přechodů k hladkému fungování JavaScriptu

Přechody jsou skvělým nástrojem, díky kterému budou věci vypadat mnohem plynuleji, aniž byste museli cokoli dělat s funkcí JavaScriptu. Vezměte si následující příklad.

Kliknutím kamkoli přesunete míč

Pomocí JavaScriptu můžete dosáhnout efektu přesunutí míče do určité pozice:

Var f = document.getElementById("foo"); document.addEventListener("click", function(ev)( f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+( ev.clientX-25)+"px)";

S CSS to můžete udělat hladce bez dalšího úsilí. Jednoduše přidejte přechod k prvku a jakákoli změna proběhne hladce:

P ( padding-left: 60px; ) #foo ( border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; )

Detekce začátku a dokončení přechodu

propertyName Řetězec označující název vlastnosti CSS, jejíž přechod byl dokončen. elapsedTime Plovoucí hodnota udávající počet sekund, po které přechod běžel v době spuštění události. Tato hodnota není ovlivněna hodnotou transition-delay .

Vlastnost CSS Transition je potřebná k nastavení animovaného přechodu z jednoho stavu do druhého. Animace funguje pomocí pseudoprvků :hover a :active, tzn. když objekt přechází z jednoho stavu do druhého.

Syntaxe přechodu CSS

přechod: [žádný | ] || || || ;

Syntaxe vypadá docela hrozivě, ale ve skutečnosti je vše jednoduché. Podívejme se na jednoduché příklady, jak to funguje. Po dvou příkladech bude probrán každý prvek syntaxe:

Příklady s vlastností Přechod

Příklad #1. Animace v html přes přechod

Разберем этот пример более более подробно. Свойство 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

CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):

Поддержка браузерами

Свойство
Opera
IExplorer
Edge
transition 26.0
4.0
-webkit- 		16.0
4.0
-moz- 		12.1
10.5
-o- 		6.1
3.1
-webkit- 		10.0 12.0

CSS синтаксис:

transition: "property duration timing-function delay | initial | inherit" ; /* допускается перечислять эффект перехода отдельно для каждого свойства в одном объявлении */ /* синтаксис будет следующим: property | duration | timing function | delay,..., property | duration | timing function | delay */ /* допускается указывать не все значения, при этом необходимо соблюдать порядок, указанный вверху примера */ /* учтите, что если вы хотите задать только delay, то вам придется указать и duration (0s) */ /* т.е. если вы хотите указать задержку 4 секунды, то вам необходимо записать это transition: 0s 4s; */ transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s; /* Смотри пример внизу страницы */

JavaScript синтаксис:

Object.style.transition = "width 3s ease-out 2s"

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

Значение Описание
transition-property Указывает имя свойства CSS для которого используется переходный эффект. Значение по умолчанию all.
transition-duration Определяет, сколько секунд или миллисекунд эффект перехода занимает времени.
transition-timing-function Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода. Значение по умолчанию ease.
transition-delay Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта). Значение по умолчанию 0 секунд.
Устанавливает свойство в значение по умолчанию.
Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

Пример использования универсального свойства transition в CSS
class = "test" > Vlastnost Transition v CSS

Příklad klouzavého vyhledávání v CSS pomocí selektoru atributů (se zadanou hodnotou) a univerzální vlastnosti přechodu:

Vytahovací vyhledávání v CSS Vyhledávání:

Datum přidání: 2011-10-16



Vlastnictví přechod odkazuje na nové vlastnosti CSS3. Pojďme ho lépe poznat.

Všichni jsme zvyklí, že při najetí myší se barva odkazu změní. V tomto případě se barva změní náhle, bez plynulého přechodu. Vlastnictví přechod vám umožní přidat malou animaci při změně barev bez použití JavaScriptu.

Ve specifikaci k tuto vlastnostříká to následující:

Přechody CSS umožňují plynulé změny vlastností v hodnotách CSS po určitou dobu.

Jinými slovy, CSS Transitions vám umožňují plynule a v průběhu času přiřazovat změny vlastnostem CSS.

Použít vlastnost přechod lze aplikovat na cokoli - pozadí, barvu, délku, velikost písma atd. Jedná se v podstatě o vlastnosti, které specifikují barvu nebo vlastnosti, které lze vyjádřit v délkových jednotkách (px, em, ex) nebo procentech. Jako událost můžeme také použít pseudotřídy:focus a:active.

Prohlížeče

Hned řeknu o prohlížečích - nový standard ještě nebyl přijat, takže tento moment musí být použity předpony -webkit-, -moz- a -o-. To ukazuje, že vlastnost je podporována Prohlížeče Chrome, Safari, Opera 10.5+, Firefox 4+. Náš "oblíbený" internet Explorer jako vždy, mimo práci, uživatel prostě neuvidí žádnou animaci.

V tomto článku jsem použil předponu -webkit-, takže všechny zde uvedené příklady budou fungovat pouze v prohlížečích Chrome a Safari.

Podívejme se na jednoduchý příklad – přidejte plynulý přechod pozadí odkazu

Nejprve si připomeňme, jak změnit barvu odkazu, když na něj najedete myší.

Nyní použijeme vlastnost CSS přechod plynule změnit pozadí odkazu. Vytvořme novou třídu, která bude shodná s třídou jednoduchý a přidat pár nových řádků:

A.cool ( padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0,5s; -webkit-transition-timing-function: easy; ) a.cool:hover (pozadí: #33f; barva: #fff; )

Vytvořme několik dalších testovacích odkazů a podívejme se na výsledek:

Nyní naše pozadí hladce změní barvu během půl sekundy! Z příkladu můžete vidět, že jsme přidali tři nové řádky s vlastnostmi -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function.

Ve skutečnosti je lze spojit do jedné vlastnosti:

Webkit-transition: pozadí 0,5s lehkost;

Můžete také přidat plynulou změnu barvy textu:

A.cool2 ( odsazení: 5px 10px; pozadí: #69f; barva: #000; -webkit-transition: pozadí 0,5 s lehkost, barva 1,0 s lehkost; ) a.cool2:hover ( pozadí: #33f; barva: #fff ;

Tento kód při najetí myší plynule změní barvu pozadí do půl sekundy a barvu písma do 1 sekundy. Kontrolujeme:

Pokud použijeme stejné parametry pro animaci, pak můžeme použít výraz: -webkit-transition: all 0.5s easy;

Nyní bude efekt přechodu aplikován na všechny měnící se vlastnosti se stejnými parametry – 0,5 sekundy, efekt náběhu.

Můžete také přidat zpoždění efektu pomocí přechod-zpoždění:

A.cool3 ( padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s easy; -webkit-transition-delay: 0.5s; ) a.cool3:hover ( background: #33f ; barva: #fff ;

Nyní bude animace fungovat půl sekundy po najetí myší. Pro jistotu zkontrolujme:

Vyhledávací tabulka

Pro lepší pochopení materiálu dávám do pozornosti malou referenční tabulku.

Transition-property Vlastnost, na kterou aplikujeme animaci. Téměř každá vlastnost CSS: barva, pozadí, šířka, velikost písma atd. transition-duration Doba trvání animace. Čas v sekundách. transition-timing-function Funkce časování používaná pro animaci: náběh, lineární, náběh, náběh, náběh, náběh, kubický-bezierův přechod-zpoždění Zpoždění animace. Čas v sekundách.