Всем кто посещает ваш сайт, необходима определённая причина, чтобы остаться на нём подольше. Каскадные таблицы стилей или CSS помогут найти такую причину, а именно создать анимацию элементов на веб-сайте. Анимация CSS позволяет оживить ваш сайт. Независимо от того, насколько полезен контент , который вы предоставили на сайте, посетители уже не так будут торопиться прочитать его побыстрее. Анимация позволяет захватить внимание пользователя, что приводит к лучшей конверсии. Анимация позволяет повысить качество обслуживания пользователей и повысить ценность вашей страницы.
Для начала, начнём с двух основных строительных блоков с помощью CSS3 :
Ключевые кадры:
Используя это свойство, можно определить стадию и стиль анимации. Кадры являются основой для анимации в CSS. Они определяют внешний вид анимации на каждом этапе временной шкалы анимации.
Ключевые кадры записываться как @keyframes, и каждый из них имеет следующие компоненты:
Name: включает в себя имя анимации, которое пишется сразу после @keyframes.
Stage: стадии анимации могут быть отображены в процентах. От 0% на начальном этапе до 100% для конечной стадии.
CSS стили: вы можете использовать различные CSS свойства на каждом этапе анимации.
@keyframes bounceOut {
0% {
transform: scale (0.1);
}
45% {
transform: scale (5.5);
}
100% {
transform: scale (0.1)
}
}
@keyframes testIn {
From {
opacity: 1;
}
To {
opacity: 0;
}
}
Свойства анимации:
После определения этапов и стилей анимации, вы должны реально определить, как анимация должна работать.
Свойства анимации используются для вызова @keyframes внутри селектора CSS.
Поэтом цель использования свойств анимации:
a) для назначения @keyframes к элементам, которые вы хотите анимировать.
b) определяют поведение анимации, есть множественные свойства анимации, он два наиболее важных из них является:
1. animation-name: такое же как определено в @keyframes.
2. animation-duration: определяет длительность анимации, например каждые 5 или 10 секунд.
test {
animation-duration: 4s;
animation-name: bounceOut;
}
Подробные свойства анимации и как использовать их эффективно.
animation-timing-function: устанавливает скорость анимации. Вы можете установить любую из имеющихся временных функций, которые являются линейными. Вы всегда можете создавать пользовательские функции синхронизации с помощью кубических криваых Безье.
Синтаксис: animation-timing-function: ease-in;
animation-delay: вы можете определить задержки между анимацией. Можно определить как положительное, так и отрицательное время задержки. Положительно значение, скажем 3 секунды, означает что следующая анимация начнётся после 3 секунд, а отрицательное значение указывает что анимация будет запускаться сразу, но длиться 3 секунды.
Синтаксис: animation-delay:3s;
animation-iteration-count: определяет количество анимации. Если вы хотите использовать итерацию, вы можете использовать его с этим свойством.
Оно может иметь следующие значения:
a) #: изображает конкретное число.
b) infinite: позволяет запускать анимацию бесконечно.
c) initial: присваивает значение по умолчанию.
d) inherit: позволяет наследовать значение элемента от родителя.
Синтаксис: animation-iteration-count: 3;
animation-direction: задаёт направление анимации. Она может быть нормальной, обратной или альтернативной.
a) normal: обычное проливание анимации вперёд.
b) reverse: с помощью этой опции, анимация играет в обратном направлении.
c) alternate: анимация играет попеременно, то есть один раз вперёд, затем назад и так далее.
Синтаксис: animation-direction : alternate;
animation-fill-mode: с помощью этого свойства можно указать какие стили будут применяться к элементу, когда анимация заканчивается. Вы можете выбрать один из следующих стилей:
a) backwards: стили наследуются от первоначального @keyframes. (До начала анимации)
b) forwards: позволяет получать стили для элемента от окончательной @keyframes.(После окончания анимации)
c) both: применяется в обоих режимах.
d) normal: не применяет стили к элементу.
Синтаксис: animation-fill-mode: both;
animation-play-state: вы можете указать будет ли анимация воспроизводиться или будет приостановлена. Всякий раз когда вы возобновляете прерванную анимацию, она будет играть с того места с которого была остановлена.
Это может быть:
a) playing: изображает текущее состояние анимации.
b) paused: изображает состояние паузы в анимации.
Теперь создадим эффект мигания, используя приведённые выше свойства.
.element {
animation-name: Blink;
animation-duration: 6s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
Это создаст эффект мигания который имеет задержку в 1 секунду, а общая продолжительность анимации составляет 6 секунд .
Эта анимация бесконечна, поэтому не имеет ограничений.
Добавление нескольких анимаций.
Вы можете добавить несколько анимаций используя запятую разделитель в файле CSS.
Пример:
.element {
animation: Fade 4s 1s infinite linear alternate,
Rotate 4s 1s infinite linear alternate;
}
В приведённом выше примере мы добавили две анимации в один элемент: Fade и Rotate.
Примечание: Вы должны определить Fade и Rotate в @keyframes в первую очередь.
Загрузите freeware антивирус http://www.360totalsecurity.com/ru/antivirus-2012/, который обеспечивает надёжную защиту вашего компьютера от вирусов, троянских программ, а также при совершении покупок через интернет.