CSS анимации

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

Както добре знаете, светът на компютрите е пълен с команди и полезни инструменти за разработване на уеб страници или онлайн медии, които в момента съществуват едновременно. Останете с нас и открийте в този нов урок друг начин да повишите нивото си с компютри и интерактивност.

Какво представляват анимациите?

Искаме да влезете изцяло в урока, но за това е необходимо да влезете в света на анимациите или това, което в графичния дизайн става дума, света на интерактивен дизайн. 

Анимациите също са част от аудиовизуалния свят, всъщност те не биха били нищо, ако или защото в тях се въвеждат аудио и движещо се изображение. Поради тази причина, когато говорим за „анимация“, ние имаме предвид това, което е популярно като „карикатури“.

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

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

Видове анимация

Има различни видове анимация:

Карикатура или традиционна анимация

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

Спрете движението

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

Пикселиране

Пикселирането е техника, която идва от Stop Motion и се състои в работа с обекти, които не са нито кукли, нито модели, а обикновени обекти или хора. Обектите се снимат няколко пъти и се изместват леко с всеки кадър.

Ротоскопия

Състои се от директно рисуване на друг чертеж, като например проследяване на рисунка върху друг чертеж или на реално лице. Счита се за предшественик на mocap, тоест за заснемане на движение, което се използва за пресъздаване на цифрови герои в света на киното.

Анимация чрез изрезки или изрязана анимация

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

3d анимация

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

В момента има и други техники като: картината върху стъкло, анимацията на пясъка, екранът на гуджа и картината върху целулоид. 

Какво е CSS?

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

стойки CSS, вижте "каскадни стилови таблици". Той се формира от език, който се използва в сектора на дизайна и при представянето на уеб страници, още по-добре, те са поредица от инструменти и команди, които отговарят за представянето на уеб страница така, както я виждаме за първи път веднъж то вече е създадено. Работи заедно с инструмента HTML (организирано от основното съдържание на страниците).

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

За какво е CSS?

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

Обикновено, за да разберете по-добре за какво е този инструмент, специалистите по дигитален маркетинг са първите, които разбират за това, тъй като те са тези, които се справят с тях.

Анимирайте в CSS

Е, сега, когато знаете малко за света на анимациите и CSS. Време е да започнете урока.

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

Всяка от тези анимации има редица предимства:

• Използването му е много лесно за прости анимации, можете да го направите дори без да имате познания по Javascript.
• Анимацията се показва правилно дори на компютри с ниска мощност.
• Управляван от браузър, той позволява да се оптимизира неговата производителност и ефективност, като по този начин се намалява честотата и се изпълняват разделите по такъв начин, че да не се виждат.

Настройки за анимация

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

Подсвойствата са:

анимация - забавяне

Време за закъснение между момента на зареждане на елемента и началото на анимационната последователност.

анимация - режисура

Показва дали анимацията трябва да се върне към началния кадър в края на последователността или трябва да започне от началото, когато достигне края.

анимация - продължителност

Показва времето, необходимо на анимацията, за да завърши своя цикъл (продължителността)

анимация - итерация - броене

Колко пъти се повтаря. Можем да посочим безкраен за да повтаряте анимацията за неопределено време.

анимация - име

Използва се за определяне на името, което описва всеки от кадрите на анимацията.

анимация - игра - състояние

Позволява ви да можете да поставите на пауза и да възобновите последователността на анимацията.

анимация - тайминг функция

Той показва ритъма на анимацията, тоест как се показват кадрите на анимацията, за това се установяват кривите на ускорение.

анимация - запълване - режим

Указва какви стойности ще имат свойствата след края на анимацията.

Настройте последователността с рамки

След като сме конфигурирали времето, номенклатурата и т.н. Време е да предложим изглед или усещане на нашата анимация.

За да направим това, ще установим две нови рамки и ще използваме правилото @ключови кадри. С това всеки кадър описва как се намира всеки елемент по време на анимационната последователност.

За да посочите време и ритъм, рамката използва процент и от и доБлагодарение на това можем да посочим кога началото се извършва с 0% и края със 100%.

Анимация на рамка и текст

За да добавите повече рамки и да ги анимирате с текст, трябва да приложите по-голям размер на шрифта на заглавката, така че заглавката да се увеличава, докато се движи за определен период от време, и след това да намалява до първоначалния си размер след това. За това ще установим следния код:

75% шрифт - размер: 300%; марж - ляв: 25%; ширина: 150%;

С този код предлагаме на браузъра, че в 75% от последователността заглавката има ляво поле от 25% и размер от 200% с ширина 150%.

Повторение на анимацията

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

Заключение

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

Осмелихте ли се вече?