Практиката за разработване на уеб ресурси доведе до две съществени тенденции: бързина и възприятия за качество. Първото задължение на предприемача да върши работата си бързо, а второто - определя границите на целесъобразността.
Посетителят преследва специфична цел, когато посещава сайт и се ръководи от общоприета представа за това къде и как трябва да работи. Разработчикът може да си върши работата, тъй като е удобно, но ако той се интересува от привличането на повече посетители, тогава тяхното мнение е неподходящо.
Синтаксис и семантика на анимацията
Свойството на CSS анимацията е лесно за използване и ви позволява бързо да извършвате интересни ефекти. За да могат елементите на дадена уеб страница да се държат по съвременен начин, както посетителят очаква, не е необходимо да бъдете особено умни и да проектирате свои собствени анимационни опции. Всичко работи по дефиниция, както се очаква и изисква.
В този пример са описани два елемента. Първият е индикаторна лента, която се движи надясно и пропорционално на нейния размер. Вторият елемент е картина, която просто се движи надясно.
Тук не са показани всички рамки. Свойството на CSS анимацията в този случай се реализира гладко. Посетител на страница наблюдава плавно движение с увеличаване на обема на линията и движението на картината. Чрез използването на различни опции за преместване, вместо типа на лекота в излизане, можете да контролирате движението. Опцията за лесно излизане ви дава възможност за ускоряване в началото и закъснение, но можете да изберете друга опция.движение.
Елементи на наслагване и взаимодействие
Всички елементи, които притежават анимация, CSS изследват независимо един от друг и от общия поток на страницата. Ако елементите се наслагват един върху друг, тогава се получава комбинацията от ефекти и като резултат се получава нов ефект. Ако в процеса на анимация елементите променят непрозрачността на собствеността (прозрачност), то поради законите на оцветяването можете да получите много оригинални ефекти на всички два - три елемента.
Картината на елемента е от голямо значение. В дадения пример лентата се оформя от картина, на която има две линии с различни цветове. Когато увеличите размера на лентата - това е трион, докато движите триона - това е движеща се вълна. Манипулирайки линиите и техния наклон, можете да оформите ефектите на общите закони на графиката. Промяната на времето за анимация също води до нестандартни решения. Използването на свойството на трансформация, например, функцията на въртене на елемент, формира оригиналните промени. Пример:
Тук лентата постоянно променя външния си вид от непрозрачното състояние в прозрачното. Долната картина в същото време само променя формата.
Информация за анимацията
CSS: анимацията на текст има специално значение. Текстът винаги е от значение и присъства на уеб страница с определена цел. Но текстът винаги е по-малко информативен от образа, но отнема много място.
Гаранция, че правилно написаният текст ще бъде адекватно възприеман от посетителя, е много по-висока от очакването за правилно разбиране на образа, особено когато дизайнерът на сайта има представа за формите на изразяване. Ако преди, когато CSS анимация дойде само в света на оформлението, имаше популярни тичащи линии, мигащи часовници, пулсиращи текстове, след това в модерното изграждане на сайта се смята за нормален принцип: не дразни посетителя, колкото е възможно по-ефективно да представя функционалността на уеб ресурса. В този контекст всеки от примерите по-горе е удобен за представяне на текстова информация, но CSS като 3D анимация е най-практичният вариант.
Тук в "нормалното" състояние текстът заема малко място. Можете да изберете основната дума или да маркирате съдържанието. Веднага след като мишката стигне до областта за текст, тя се разгъва с CSS 3D анимация в нормално четливо състояние. Възможността за спестяване на пространство в комбинация с 3D дизайн позволява компактно поставяне на информация. Освободеното място може да се използва за други или свързани цели. Благодарение на CSS анимацията, необходимата информация ще бъде достъпна в точното време.
Потребителска анимация
Значителни успехи в създаването на висококачествени уеб ресурси все още оставят един-единствен най-странен въпрос: защо проектирането на сайт е грижа на разработчика? Сайтът не е произведение на изкуството и не е резултат от творчески процес за естетически цели. Сайтът е преди всичко функционалност, която, по мнението на собственика (разработчика), ще привлече нови посетители към нея и ще ви даде възможност да работите с клиентите си.
За продажба на продукт, за предоставяне на услуги, за извършване на една или друга работа Посетителят идва за стоки, услуги и работи. Дизайнът и анимацията са важни, но гледната точка на посетителите е всичкоСъщото е по-важно от мнението на собственика (разработчикът). Ако в обикновен магазин купувачът винаги е прав, тогава защо в един онлайн магазин той трябва да прави всичко по начина, по който разработчикът е предложил предложения дизайн? Анимацията в контекста на CSS е чудесен инструмент, но защо не отиде малко по-далеч: колко потребители, толкова много варианти на изразяване на функционалност и дизайн. Възможността за "потребителска анимация" е когато има нещо, което предприемачът предложи, какво са избрали предишните потребители и какво мисли настоящият потребител.
