CSS анимация: примери на приложения

Anonim

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

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

Синтаксис и семантика на анимацията

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

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

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

Наслагване и взаимодействие

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

Ако в процеса на анимация елементите променят свойствата на непрозрачност (прозрачност), то поради законите на смесване на цветовете, можете да получите много оригинални ефекти само с два - три елемента.

Елементът на фигурата е важен. В горния пример, лентата е оформена от картина, в която са разположени две линии с различни цветове. Когато размерът на лентата се увеличава, той е трион, а когато се види, се движи вълна. Чрез манипулиране на линиите и техния наклон, можете да създавате ефекти според общите закони на графиката.

Промяната на времето за анимация също води до нестандартни решения. Използването на свойството на трансформация, като например функцията за въртене на елемента, формира оригиналните промени. например:

Тук лентата непрекъснато променя външния си вид от непрозрачно състояние до прозрачно. Долната картина променя само формата.

Анимация на информация

В CSS: анимацията на текст има специално значение. Текстът винаги е от значение и присъства на уеб страница с определена цел. Но текстът винаги е по-малко информативен от образа, но отнема много място.

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

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

В този контекст всеки от примерите по-горе е удобен за представяне на текстова информация, но прилагането на CSS като 3D анимация е най-практично.

Тук, в "нормалното" състояние, текстът заема малко място. Можете да маркирате основната дума или да маркирате смисъла. Веднага след като мишката стигне до областта за текст, тя се обръща от CSS 3D анимация към нормално четено състояние.

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

Потребителска версия на анимацията

Забележим успех в създаването на висококачествени уеб ресурси все още не обръща внимание на един странно поставен въпрос: защо уебсайтът създава загриженост на разработчика?

Сайтът не е произведение на изкуството и не е резултат от творчески процес за естетически цели. Сайтът е преди всичко функционалност, която, по мнението на собственика (разработчик), ще доведе до нови посетители и ще даде възможност за работа с клиентите.

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

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

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