Анімацыя CSS і яе магчымасці

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

Сакрэт ідэальных распрацовак

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

CSS-анімацыя з'яўлення

А цяпер пяройдзем да цікавых прыкладаў. Як правіла, стандартнае выкарыстанне анімацыі заключаецца ў тым, каб мяняць нейкія элементы сайта плаўна з цягам часу. Але гэта ж занадта банальна, не знаходзіце? Таму тут мы падзелімся з вамі неардынарным спосабам выкарыстання часу з'яўлення анімацыі.

Справа ў тым, што рэальна змены на сайце ў кавалку анімацыі або ў яе поўным выглядзе могуць быць практычна імгненнымі. Для гэтага мы задаём два якіх-небудзь ключавых кадра, але пры гэтым выкарыстоўваем вельмі маленькі інтэрвал. Напрыклад, ён можа быць роўны 0,001%. У такім выпадку анімацыя CSS можа адбыцца ў момант. Гэта выдатна падыдзе для імітацыі якой-небудзь неонавай шыльды. Шыльда гэтая будзе міргаць, а калі анімацыя CSS пры гэтым будзе яшчэ і выкарыстоўваць празрыстасць і ўласцівасць text-shadow, то шыльда атрымаецца амаль як сапраўдная.

Прывядзём прыклад кода.

Паляпшаем функцыянал кнопак

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

Пры дапамозе такога простага кавалка кода анімацыя блока CSS будзе глядзецца досыць нядрэнна. Яна глядзіцца вельмі цікава і часта выкарыстоўваецца на дасканалых розных сайтах.

CSS-анімацыя пры навядзенні на фрагмент сайта

Чым больш дынамічна і сучасней сайт, тым даўжэй на ім застаецца карыстальнік. Акрамя таго, важную ролю адыгрывае таксама і інтэрактыўнасць. Безумоўна, гэта так, але што ж можа дапамагчы зрабіць сайт максімальна інтэрактыўным?

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

Такім чынам, ёсць цудоўная ўласцівасць transition, якое можа прымаць аж да чатырох звязаных з ім уласцівасцяў.

На працягу пэўнага часу CSS-анімацыя пры навядзенні на гэты кавалак кода будзе мяняцца. Час вызначаецца уласцівасцю duration. Гэта значыць пры навядзенні на які-небудзь элемент у яго пачне своеасабліва мяняцца якое-небудзь ўласцівасць, якое мы задалі ў селектары. Для нашага выпадку гэта - .element (пункт наперадзе). Некалькі ніжэй прыводзіцца прыклад кода, калі пры пераходзе ля кантэйнера div, які валодае псевдоклассом .hover, змяняецца фон з чырвонага на зялёны.

Пры навядзенні мышы карыстальніка анімацыя CSS змяняецца не адразу, а з затрымкай у некаторую долю секунды, што стварае цікавы эфект.

Акрамя таго, калі ў папярэднім прыкладзе вы задавалі пэўнае правіла, па якім фон ў элемента div павінен быў мяняцца з чырвонага і пераходзіць на зялёны на працягу 0,4 секунды, то варта ўлічыць, што выкарыстоўваючы значэнне all, вы можаце звярнуцца да ўсяго ўласцівасці цалкам адразу.

Прыклад кода прадставім наступным чынам.

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

Некалькі нюансаў выкарыстання дадзенага тыпу анімацыі на кнопках

У прынцыпе, па вялікім рахунку, не гэтак важна, у якім парадку будуць паказвацца і пералічвацца дадзеныя значэння. Акрамя аднаго выпадку. Мы можам мець справу з уласцівасцю delay. У такім выпадку нам спатрэбіцца паказваць і працягласць па часе. Інакш кажучы, нам неабходна будзе ў кодзе паведаміць, як доўга будзе адбывацца тая самая патрэбная нам затрымка.

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

анімацыя тэксту

Пры дапамозе кода можа быць зададзена і выдатная анімацыя тэксту CSS. Гэта можа быць і нейкая артыкул, і буйны загаловак, тытул сайта. Як ужо было сказана вышэй, тут галоўнае - не перабраць і не ператварыць свой сайт у звалку, якая будзе танна выглядаць.

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

Анимируем тэкст у стылі фільмаў жахаў

Уласна, сама ідэя складаецца ў тым, каб зрабіць тэкст, у якім літары былі б трохі размыты і круціліся б. Паміж літарамі пры гэтым павінна быць прастора. Мы будзем выкарыстоўваць межбуквенные цені, а таксама інтэрвал. Для таго каб рэалізаваць задумку, нам спатрэбіцца скрыпт Lettering.js аўтарства Дэйва Руперта. Ён патрэбны, каб абгарнуць словы плюс літары ў некалькі тэгаў span. Спачатку трэба абгарнуць фразы ў тэг h2. Прывядзём прыклад кода.

Затым обернём ўсе словы ў тэгах h2 ў тэг span.

Гэта адбудзецца вось так.

Выглядаць гэта будзе некалькі грувастка, але хай вас гэта не бянтэжыць.

Атрымаецца досыць вар'яцкая структура.

У выніку мы кожную з наяўных у нас літар абгарнулі ў тэг span. Іх атрымалася сапраўды шмат. Але ў кодзе вышэй прыведзены прыклад даволі спрошчаны. Цалкам усю структуру вы зможаце напісаць самі, і яна будзе некалькі больш. Залежыць гэта таксама і ад таго, які тэкст вы будзеце выкарыстоўваць.

Завершым нашу працу некаторай невялікі стылізацыяй. Усе нашы загалоўкі ў прыведзеным прыкладзе будуць размяшчацца ва ўсю шырыню экрана. І займаць яны будуць амаль усю вольную месца.

Паколькі мы збіраемся размясціць усе нашы літары па цэнтры экрана, то для нашага кантэйнера нам таксама спатрэбіцца і flexbox.

Прывядзём прыклад яго кода.

Цяпер мы зрабілі так, што ўсе літары, якія абгорнутыя ў клас span, які належыць бацькоўскаму класу .os-phrases, будуць размяшчацца і будуць замацаваны менавіта па цэнтры.

Не забудзьцеся дадаць трохі вольнага месца, гэта значыць сам межбуквенный інтэрвал.

Пры гэтым першая абгортка будзе як бы мець пэўную дадатковую ўласцівасць. Гэта ўласцівасць perspective. Яно дазволіць нам зрабіць так, што гэты ўчастак як бы будзе вылучацца, выходзіць на першы план.

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

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

Нададзім невялікі, але вельмі цікаўны эфект. Стаўце opacity на 0,2. Межбуквенное адлегласць пры гэтым будзе даволі вялікім. Літары таксама будуць некалькі павернутыя па восі Y. Бачыць вы, а таксама карыстальнікі вашага сайта, будзеце толькі невялікую частку гэтых літар. Таксама не забудзьцеся надаць эфект ўласцівасці text-shadow. На палове анімацыі мы зробім незвычайную рэч. Мы завострым самі літары, а таксама паменшым адлегласць, якое размяшчаецца паміж імі, затым павялічым непразрыстасць, а пасля повернём знакі на 0 па восі Y.

У канцы мы зноў дадамо знікаючыя літары і некалькі промасштабируем іх. Гэта дасць зноў невялікі эфект размыцця.

І нарэшце апошняя фраза CSS-анімацыі.

І так, напрыканцы дадамо апошні штрых. Зробім акцэнт на некаторых канкрэтных словах. У іх будзе тлустая напісанне. Гэта і надасць неабходны акцэнт.

Не забывайце і пра крыніцы натхнення

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

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