CSS анимация и нейните възможности

Задавайки въпрос, как да направите анимация

Тайната на идеалните дизайни

Основният съвет, който може да се даде на тези, които искат да се научат напълно, каква е гладката анимация на CSS, е това. С ежедневните експерименти с готови парчета код, опитайте се да проверите свои собствени експерименти. Във време, свободно от работа на собствените си сайтове, опитайте се да видите какво се случва, когато сгъвате едно или друго парче код, за да изучите напълно имот. Опитайте се да внедрите всякакви интересни идеи, като използвате напълно различни езикови инструменти, а анимацията на CSS ще се отвори за вас от новата страна. Този прост съвет е следният - експериментирайте сами.

CSS анимация на външния вид

И сега нека се обърнем към интересни примери. Обикновено стандартното използване на анимацията е да се променят плавно някои елементи от сайта. Но това е прекалено трогателно, не мислиш ли? Ето защо тук ще споделим с вас необичаен начин за използване на времето за анимация.

Факт е, че действителните промени на сайта в парче анимация или в пълната му форма могат да бъдат почти мигновени. За тази цел възлагаме две ключови кадри, но използваме много малък интервал. Например, тя може да бъде равна на 0.001%. В този случай анимацията на CSS може да се случи незабавно. Това е идеално за имитиране на всякакви неонови знаци. Този знак ще мига и ако анимацията на CSS все още използва прозрачност и собственост на текст-сянка, знакът ще бъде почти като истински.

Ето примерният код.

Подобряване на функционалността на бутоните

Ако разгледаме въпроса колко необичайно може да бъде CSS-анимационен бутон, тогава можем да кажем, че опциите за декорация на бутоните на сайтовете са много. Нека разгледаме един пример. Ефектът на натиснатия изпъкнал бутон. Примерният код е по-долу.

С тази проста част от кода, анимацията на CSS блока ще изглежда доста добре. Тя изглежда много интересна и често се използва на перфектни различни сайтове.

CSS-анимация, когато се движите върху фрагмент от сайта

Колкото по-динамичен и модерен е сайтът, толкова по-дълго потребителят остава на него. В допълнение, интерактивността също играе важна роля. Разбира се, това е вярно, но какво може да помогне на сайта да стане възможно най-интерактивен?

Много добра работа изглежда с дизайна на елементи и фрагменти от сайта, когато задържате мишката. Анимирането на бутоните, когато се движите, се разглобяваме по-горе, но освен това можете да "съживите" и всички видове части от сайта, правейки ги възможно най-стилни. Както и при всичко останало, основният принцип тук не е да го прекалявате.

Така че има отлична собственост на прехода, който може да отнеме до четири свързани имота.

В определено време CSS-анимацията, когато задръжте курсора на мишката върху това парче код, ще се промени. Времето се определя от собствеността на продължителността. Тоест, когато зависите над даден елемент, той започва да променя по свой начин някаква собственост, която попитахме в селектора. За нашия случай това е. Елемент (точка напред). По-долу е примерният код, когато се превключва от контейнер div, който има псевдо-клас, фоновете се променят от червено на зелено.

Когато задържите курсора на мишката на потребителя, анимацията на CSS не се променя веднага, но със закъснение за малко от секундата, което създава интересен ефект.

Освен това, ако в предишния пример, ти попита определено правило, че фон в DIV елемент се променя от червено към зелено и да се премести в рамките на 0,4 секунди, трябва да се отбележи, че използването на всички стойност, можете да кандидатствате за целия имот е изцяло веднага.

Примерът на кода е както следва.

Както е показано, свойствата на подложката и фона ще имат преходен ефект, който се определя от собствеността на прехода. Трябва да отбележите, че можете да зададете определен набор от стойности, разделени със запетаи.

Няколко нюанса на използването на този тип анимация върху бутоните

По принцип, като цяло, не е толкова важно в какъв ред тези стойности да бъдат посочени и изброени. С изключение на един случай. Можем да се справим със собствеността на забавянето. В този случай трябва да посочим продължителността на времето. С други думи, в кода ще трябва да предоставим колко дълго ще се случи забавянето, което ни трябва.

Не забравяйте обаче, че някои свойства не могат да имат ефект на преход. Това означава, че те не могат да бъдат преходни. Това се дължи на факта, че те може и да не са вече анимирани.

Текстова анимация

С помощта на кода може да се определи отлична анимация на CSS текст. Това може да е някаква статия и основно заглавие, заглавието на сайта. Както вече споменахме, основното нещо тук не е да прекалявате и да не превърнете сайта си в сметище, което ще изглежда евтино.

Е, нека се опитаме да разберем, какво е анимация текстови CSS и да създавате текстови сенки. Вероятно сте виждали филми на ужасите, в които имената на самите картини сякаш избледняват на някакъв тъмно тъмен фон. Нека се опитаме да пресъздадем нещо подобно на общия пример.

Анимирайте текст в стила на филмите на ужасите

Всъщност, самата идея е да се направи текст, в който буквите да бъдат леко замъглени и да се въртят. Между буквите трябва да има интервал. Ще използваме сянка между букви, както и интервал. За да приложим идеята, се нуждаем от сценария на Lettering.js от авторството на Дейв Рупърт. Необходимо е да обгръщате думи плюс букви в няколко маркера. Първо, трябва да обвиете фрази в маркера h2. Ето примерният код.

След това обвийте всички думи в h2 таговете в маркера за разделяне.

Това ще се случи по този начин.

Тя ще изглежда малко тромава, но не се притеснявайте от нея.

Вземи доста луда структура.

В резултат на това ние обвиваме всяка от буквите, които имаме в маркера за разделяне. Те наистина се оказаха много. Но в кода по-горе, примерът е доста опростен. Можете сами да напишете цялата структура и тя ще бъде малко по-голяма. Зависи и от кой текст ще използвате.

Завършете работата си с малко стилизиране. Всичките ни заглавия в горния пример ще бъдат разположени в цялата ширина на екрана. И те ще заемат почти цялото свободно пространство.

Тъй като ще поставим всички наши букви в центъра на екрана, за нашия контейнер също имаме нужда от гъвкава кутия.

Нека да дадем пример за неговия код.

Сега сме направили така, че всички букви, които са обвити в класа на span, който принадлежи към родителски клас .os-фрази, ще бъдат разположени и ще бъдат фиксирани точно в центъра.

Не забравяйте да добавите малко свободно място, тоест интервалът между буквите.

В този случай първата обвивка ще има известна допълнителна собственост. Този имот е перспективен. Това ще ни позволи да направим така, че този сайт да се изпъкне, да излезе на преден план.

Същите букви ще бъдат прозрачни и ние ще пуснем интервала за анимация някъде за 5,2 секунди. По-долу е даден пример за код.

Също така е важно да се определи как и с какво забавяне нашите оферти и фрази ще се появят. Коя част от текста ще се покаже по-бързо от предишния и колко. Кодът ще изглежда така.

Ние ще дадем малък, но много любопитен ефект. Задайте непрозрачността на 0.2. Разстоянието между буквите ще е доста голямо. Буквите също ще бъдат леко завъртени по оста Y. Вие, както и потребителите на вашия сайт, ще видите само малка част от тези букви. Също така не забравяйте да приложите свойството на текст-сянка. Половината анимация ще направим нещо необичайно. Ще наточим самите букви и ще намалим разстоянието между тях, след това ще увеличим непрозрачността и след това ще превърнем знаците на 0 по оста Y.

В края на краищата отново ще добавим изчезващите букви и ще ги мащабираме малко. Това отново ще даде малък ефект на размазване.

И накрая последната фраза на CSS-анимация.

И да, накрая добавете окончателното докосване. Ще се съсредоточим върху някои конкретни думи. Те ще имат дебел маркер. Това ще даде необходимия акцент.

Не забравяйте източниците на вдъхновение

Когато се опитвате да експериментирате с CSS свойства и анимации, опитайте се да намерите вдъхновение във всичко в ежедневието. Тя може да бъде всичко, от интересна уеб страница до някакъв страхотен видео ефект.

Освен това, ако не огледате как се прави този или онзи ефект и се опитате да го пресъздадете сами, можете да постигнете добри резултати. Или поне винаги научете повече за възможностите на програмния език, който всъщност използвате. Дори идеята, че не сте изпълнили напълно, може много добре да бъде много ефективна.