Animace pomocí CSS transformuje

Příklady na této stránce bude pracovat správně v Safari, Chrome a Opera. Ve Firefoxu před verzí 4 uvidíte transformace, ale bez animace. Transformační účinky také pracovat se v aplikaci Internet Explorer 9 používat MS-dodavatele prefix.

Provádění animace v CSS zahrnuje vytvoření transformace , ke kterému dochází v reakci na najetí myší nebo jiné události. Poté, spíše než použití efektu okamžitě, máme přiřadit přechod časovou funkci , která se vztahuje k transformaci / s po nastavenou dobu.

Firefox a Opera nyní podporuje tyto transformace s téměř stejnou syntaxi - stačí vyměnit-webkit s-moz-O nebo v příkladech níže a uvidíte stejné účinky. A můžete použít-MS, aby transformační efekty pro IE9.

1. Představujeme CSS transformace

Účinek CSS transformace je změnit vzhled prvku v prohlížeči pomocí translace, rotace nebo jinými prostředky. Když jsou definovány v šabloně stylů transformací jsou aplikovány před stránka je vykreslen, takže nemusíte skutečně vidět žádné animace probíhajících. Transformace může být také použita jako mouseover nebo podobné účinky, které můžete vidět v následující části.

Apple návrh CSS transformace vyžaduje schopnost měnit perspektivu a práci ve třech rozměrech, ale je to nějaký způsob daleko ještě. Dokonce i funkce Projevil se zde neobjeví v jiných prohlížečích, dokud nebudou schváleny normalizační orgán, kteří jsou stále na hašteření ohledně CSS3 moduly .

Níže jsme umístěna čtyři totožné DIV je stylizovaný jako 100 x 60 pixelů box s 2 pixel hranici. Následně se každý prvek byl transformován nějakým způsobem pomocí-webkit-transform takto:

box 1	Přeloženo do pravé:-webkit-transform: přeložit (3eM, 0);
box 2	Otáčet 30 stupňů hodiny:-webkit-transform: rotate (30deg);
box 3	Přeloženo do levého a dolů:-webkit-transformace: přeložit (-3eM, 1em);
box 4	Zmenšen na dvojnásobek své původní velikosti:-webkit-transform: scale (2);

Příklad 1 www.the-art-of-web.com/css/css-animation/#transforms

 

Bez překlady, a červeným okrajem na druhém poli, měli byste vidět jen čtyři identické políčka označená jednoho přes čtyři. To, co vidíte v podporovaných prohlížečích (Safari, Chrome, Firefox, Opera), nicméně, bude více jako toto:

Za povšimnutí stojí skutečnost, že text je stále volitelný v transformovaných prvků, i když otáčí, a že změna měřítka prvek ovlivňuje další vlastnosti včetně hraničních šířky a velikosti písma a ne jen rozměry.

2. Animace své transformuje

Zatímco CSS transformace sama o sobě je výkonný nástroj pro vývojáře (i když jsem se otřásla při pomyšlení, co by se stalo, kdyby to bylo více široce dostupné), schopnost animovat stejné účinky pomocí vlastnost-webkit-přechod je mnohem více vzrušující. Přesuňte kurzor myši na následující čtyři boxy pro demonstraci:

Příklad 2: www.the-art-of-web.com/css/css-animation/#animation

To, co vidíte nahoře je čtyři krabice z předchozí části, v jejich výchozího stavu. Když si mouseover některého z boxů je však transformace CSS použita jako vteřinovou animace. Když se myš pohybuje pryč animace je obrácen, přičemž každé pole zpět do výchozí polohy a stavu. A my jsme dosáhnout bez použití JavaScriptu - pouze HTML a CSS!

Pokud si myslíte, že je v pohodě, si uvědomit, že animace CSS lze aplikovat nejen na transformace, ale i do jiných CSS vlastností, včetně: zákalu, barvy a spoustu dalších vlastností.

V dalším příkladu pole na levé straně začíná jako malé a zelené s hranatými rohy, zatímco jeden na pravé straně, je větší, s červeným okrajem a zaoblenými rohy. Vznášející se nad některou z krabic spustí animaci, která dělá box 1 se na vzhledu kolonce 2 a naopak.

Příklad 3: www.the-art-of-web.com/css/css-animation/#animation

Opět platí, že jsme stále jen pomocí HTML a CSS, aby se to stalo. Bez CSS transformuje dvě krabice bude stále měnit jejich border-color, a možná i border-radius, ale to se stává okamžitě, a nikoli jako jedna sekunda animace.

Pro pokročilejší příklady si můžete přečíst náš nový článek o používání JavaScript pro spuštění animace .

3. Více transformací na jeden prvek

Chcete-li použít více než jednu transformaci na jeden prvek se uvede je jeden po druhém oddělených mezerami. Submenu například v pravé horní části této stránky má následující styly:

<style type="text/css">
#submenu { background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#submenu:hover { background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}
</style>

To znamená, že když se vznášejí nad podmenu, změní barvu, otáčet a zdvojnásobilo po dobu jedné sekundy, jak je znázorněno zde:

<=>

Tyto účinky jsou nyní k dispozici v posledním veřejným vydáním Safari, takže v zásadě všechny OSX uživatelé budou mít možnost vidět tyto účinky. Ať už je to dobrý nápad přidat na vaše webové stránky nechám na vás.

Update: Díky misterbisson ty bez WebKit nyní vidět videoukázky z menu animace:

4. Animace v akci

Tady je další příklad toho druhu zábavy, můžeme mít v kombinování různých efektů do jednoho animace. Možná, že už můžete zjistit, co se bude dít na základě CSS?

<style type="text/css">
#outerspace { position: relative;
height: 400px;
background: #0c0440 url(/images/outerspace.jpg);
}
div.rocket { position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
transition: all 3s ease-in;
}
div.rocket img { -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket { -webkit-transform: translate(540px,-200px);
-moz-transform: translate(540px,-200px);
-o-transform: translate(540px,-200px);
-ms-transform: translate(540px,-200px);
transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket img { -webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
</style>

 

Příklad 4 www.the-art-of-web.com/css/css-animation/#outerspace

Pokud používáte Safari 3 si můžete všimnout, některé problémy s animací, zvláště pokud se obrátí poté, co pohnete myší pryč, ale v nejnovější verzi modulu WebKit je to už mnohem hladší. Také animace v Opeře je trochu nevyrovnaný, s ne všechny prvky je animovaný.

Tečkovaný obrys, který se objeví v průběhu animace ukazuje umístění DIV obsahující rakety obraz. Tento DIV překládá přes obrazovku, zatímco obraz uvnitř se otáčí. Simple!

Pro prohlížeč postižené, co se děje, je, že když pohnete myší přes prostor pozadí, raketové překládá z vlevo dole v pravém horním rohu po dobu 3 sekund (translate ()), a také se otáčí 70 stupňů ve směru hodinových ručiček během prvních 2 sekundách (otáčení ()). Účinek je základní, ale ukazuje potencionálních.

Chcete-li mít větší kontrolu nad animací cest a načasování, můžete nastavit klíčové snímky modulu WebKit . Kromě toho umožňují animace pro automatické spouštění a nikoli v závislosti na události myši.

5. Více časové funkce

V tomto příkladu se uchází čtyři různé přechody pomocí čtyři různé časové funkce.

Když jste: kurzor nad oblast na pravé modré pole bude točit, měnit barvu z červené na modrou a přesunout z levé horní části obsahující pole na pravém dolním rohu přes dvě sekundy.

Příklad 5 www.the-art-of-web.com/css/css-animation/#stage

První věc, které si všimnete, je, že, že pohyb pole se zdá být zakřivený spíše než rovně. Je to proto, že jsme použili snadné out časovou funkci pro horizontální překlad a snadnost-in pro vertikální.

Druhá je, že změna barvy z modré na červenou probíhá přes první druhá ze dvou části přechodu, po němž následuje otáčení, který se koná na druhé sekundy.

Trik je to, že místo toho, aby definování vlastnost-webkit-přechod jako jediný majetek, můžete rozdělit do dílčích částí. Také jsme využili na-webkit-přechod-delay, který umožňuje nastavit počáteční bod různých efektů.

Zde jsou příslušné CSS příkazy:

#block { ... background: blue;
... -webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
... }
#stage:hover #block { left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
}

Pravidla ovlivňující barvu pozadí přechodu byly zvýrazněny.

Firefox nezobrazí podporovat přechod-delay vyžaduje jednotek, které mají být specifikovány i pro nulové hodnoty na-moz-přechod zpožděním, takže 0s, 0S, 0S, bude 1s pracovat pro výše uvedený příklad.

6. Umístěte ukazatel myši nad jeden prvek ovlivnit další

Pár lidí se ptali spuštění animací ve vztahu ke kliknutí nebo vznášet událost jinde na stránce. S JavaScriptu to lze provést pomocí obslužné rutiny události nastavit nebo změnit className prvku, které mají být animované, a mít transformaci nebo klíčových snímků spojených s novou třídou.

Pomocí CSS existují možnosti cílení souvisejících prvků. Jedná se o voliče například> (dítě), + (přilehlé sourozence) a ~ (všeobecné sourozenec) Kombinátory .

Předchozí příklad všechny požadované přímý hover události buď na samotný prvek nebo na jeho obalu, modrý box naopak stín v tomto příkladu je animovány pouze tehdy, když myší nad její sibing, červené pole:

Příklad 6 www.the-art-of-web.com/css/css-animation/#stage2

Příslušný CSS kód je následující. Všimněte si, že používáte + přilehlé sourozence combinator zaměřit # # box1 box2 kdy dojde k události hover. ~ Combinator může být více flexibilní, že umožňuje zaměřující se na prvky, které jsou dále od spouštěcího prvku (některé příklady ).

#box2 { position: absolute;
left: 120px;
... background: blue;
... }
#box1:hover + #box2 { -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left: 627px;
background: yellow;
}

Samozřejmě, že můžeme stále animovat první políčko zároveň jako cílení je to sourozenec nebo sourozenci:

Příklad 7 www.the-art-of-web.com/css/css-animation/#stage3

Jen se ujistěte, že pohybovat se vznášela prvek z pod ukazatelem nebo animace se zastaví / vzad.

Tyto příklady pracují více či méně podle plánu v modulu WebKit (Safari, Chrome), Firefox a Opera. Mohou také pracovat v tj. 10 nebo vyšší - jestli někdo může potvrdit, že dejte nám prosím vědět.

7. Reference

• Surfin 'Safari - CSS transformace
• Surfin 'Safari - CSS animace

Original version: http://www.the-art-of-web.com/css/css-animation/