Артыкул CSS: Анімацыя з дапамогай CSS пераўтварэння

Original on www.the-art-of-web.com

Прыклады на гэтай старонцы, будзе працаваць належным чынам у Safari і Chrome і Опера. У апошняй версіі Firefox з'явіцца пераўтварэнняў, але без анімацыі (хоць гэта хуткім часам). Калі вы ўсё яшчэ карыстаецеся Internet Explorer нічога на гэтай старонцы будзе сэнсу.

Рэалізацыі анімацыі ў CSS мяркуе стварэнне пераўтварэнні правесці ў адказ на навядзенні курсора мышы ці іншага мерапрыемства. Тады, замест ужывання эфекту адразу, мы прызначаем тэрміны пераходнай функцыяй, якая ўжываецца пераўтварэнне / з на працягу вызначанага перыяду часу.

Уяўляючы CSS Пераўтварэнні

Уплыў пераўтварэння CSS гэта змяніць вонкавы выгляд элемента ў браўзары шляхам перакладу, заваротку ці іншымі сродкамі. Калі вызначаны ў табліцы стыляў пераўтварэння ўжываюцца да візуалізацыі старонкі, так што вы насамрэч не бачны анімацыі. Пераўтварэнні могуць таксама ўжывацца ў якасці навядзенні курсора мышы ці аналагічны эфект, які вы можаце ўбачыць у наступнай частцы.

Прапанова для Apple CSS Пераўтварэнні заклікае магчымасць змяняць перспектыву і працаваць у трох вымярэннях, але гэта нейкім чынам адабралі яшчэ. Нават функцыі прадэманстравалі тут не будзе з'яўляцца і ў іншых браўзарах, пакуль яны не зацверджаны органам па стандартызацыі, якія ўсё яшчэ спрэчка з нагоды CSS3 модуляў.

Ніжэй мы змесцавалі чатыры ідэнтычных DIV у стылі, як 100 х 60 пікселяў пушкі з 2 пікселя зялёную мяжу. Пасля, кожны элемент быў ператвораны ў некаторым родзе, выкарыстоўваючы -webkit-transform уласнасці наступным чынам:

Абноўлена: Firefox і Опера зараз падтрымлівае гэтыя пераўтварэнні з ідэнтычным сінтаксісам. Проста заменіце -webkit з -moz і/ці -о у прыкладах ніжэй, і вы ўбачыце тыя ж наступствы.

Без перакладу, а чырвоная аблямоўка на другую скрыню, вы б убачылі толькі чатыры ідэнтычных ящикes пазначаны 1 па 4. Што вы бачыце на падтрымоўваных браўзараў (Safari, Chrome, Firefox, Opera), аднак, будзе больш прыкладна так:

Варта адзначыць той факт, што тэкст па-ранейшаму выбар у трансфармаваных элементаў, нават пры кручэнні, і, што маштабаванне элементаў уплывае на іншыя ўласцівасці, у тым ліку межы шырыні і памеры шрыфтоў, а не толькі памерамі.

Анімацыя вашы пераўтварэнні

Хоць CSS трансфармацыі само па сабе з'яўляецца магутнай прыладай для распрацоўнікаў (хоць я з уздрыгам думаю, што адбудзецца, калі ён быў больш даступным), здольнасць animate такое ж дзеянне, выкарыстоўваючы -webkit-transition з'яўляецца значна цікавейшай. Навядзіце курсор мышы на наступныя чатыры ящикes для дэманстрацыі:

Тое, што вы бачыце вышэй 4 ящикes з папярэдняй часткі, у іх стан па змаўчанні. Пры навядзенні курсора мышы любой з ящикes, аднак, пераўтварэнне CSS ужываецца як адна другая анімацыі. Пры навядзенні курсора мышы сыходзіць анімацыі адмяніў, прымаючы кожная скрыня вярнуцца да яго ў зыходнае становішча і стан. І мы можам дамагчыся ўсяго гэтага, не выкарыстоўваючы нічога, акрамя HTML і CSS!

Калі вы думаеце, гэта стромка, разумеюць, што CSS анімацыі могуць быць ужыты не толькі для пераўтварэнняў, але і для іншых уласцівасцяў CSS у тым ліку: празрыстасць, колер і кучу іншых уласцівасцяў.

У наступным прыкладзе скрыня злева пачынаецца, як малыя і зялёны з квадратнымі кутамі, а адзін справа больш, з чырвонымі краямі і закругленымі кутамі. Пры навядзенні курсора на любой з ящикes выкліча анімацыі, што робіць скрыню 1 узяць на з'яўленне скрыня 2, і наадварот.

Актывацыя пераўтварэння з дапамогай :hover падтрымліваецца ў Firefox, але гэта пакуль не ўяўляецца магчымым кантраляваць тэрміны наступстваў выкарыстання пераходаў, а элемент руху ці змены неадкладна.

Ізноў жа, мы дагэтуль толькі з выкарыстаннем HTML і CSS, каб гэта адбылося. Заставайцеся з намі для больш складаных прыкладаў выкарыстанні JavaScript для кіравання анімацыяй. Без CSS пераўтварэнняў 2 ящикe ранейшаму будзе змяняць border-color і, магчыма, border-radius, але гэта адбываецца адразу, а не як адна другая анімацыі.

Некалькі пераўтварэнняў на адным элеменце

Каб ужыць больш за адзін пераўтварэнне аднаго элемента проста пералічыць іх адзін за адным, падзеленыя прабеламі. Падменю, напрыклад, на верхняй правай частцы старонкі ёсць наступныя стылі:

<style type="text/css">

</style>

Гэта азначае, што пры навядзенні мышы на меню, яно будзе змяняць колер, паварочваць, вырас удвая на працягу адной секунды, як паказана тут:

<=>

Гэтыя эфекты зараз даступныя ў апошнія публічны рэліз Safari, так што ў прынцыпе ўсё OSX карыстачы змогуць бачыць гэтыя эфекты. Няхай гэта будзе добрая ідэя, каб дадаць іх на свой сайт я сыду ад вас.

Анімацыя ў дзеянні

Зараз вось яшчэ адзін прыклад такога роду весялосці мы можам спалучаць розныя эфекты ў адным анімацыі. Можа быць, вы ўжо працуеце, якія адбудзецца на аснове CSS?

<style type="text/css">
#outerspace {
position: relative;
height: 400px;
background: #0c0440 url(http://www.the-art-of-web.com/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;
}
div.rocket img {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-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);
}
#outerspace:hover div.rocket img {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
}
</style>

Калі вы выкарыстоўваеце Safari 3 можна заўважыць некаторыя праблемы з анімацыяй, асабліва, калі ён змяняе пасля перасоўвання мышы прочкі, але ў апошняй версіі WebKit гэта ўжо значна гладчэйша. Акрамя таго, анімацыі ў оперы трохі няўстойлівай, прычым не ўсе элементы, анімаваныя.

Пункцірная лінія, якая з'яўляецца падчас анімацыі паказана месцаванне DIV утрымоўвалы малюнак ракеты. Гэта азначае DIV па экране, а малюнак усярэдзіне круціцца. Проста і эфектыўна!

Для браўзара з парушэннямі, што адбываецца, што, калі вы перасоўваеце паказальнік мышы на прасторы фону, ракета перакладаецца з левага ніжняга ў правым верхнім куце на працягу 3 сек (translate()), а таксама круціцца 70 градусаў па гадзіннікавай стрэлцы за першыя 2 секунды (rotate()). Эфект знаходзіцца ў зачаткавым стане, але пры гэтым паказвае патэнцыйных.