Доброго времени суток, дорогой читатель! В этой статье я покажу Вам каким образом можно анимировать элементы веб-сайта средствами CSS. Это стало возможным с выходом в свет революционного CSS3. С его помощью мы можем двигать, вращать, увеличивать, скрывать и отображать элементы без использования JavaScript.

Самый простой способ анимировать сайт — подключить библиотеку Animate.css, которая содержит в себе большую сборку кроссбраузерных анимации элементов.

На официальном сайте Вы можете ознакомится со всеми видами анимации.

Animate.css

Для подключения библиотеки вставьте между тэгами <head></head>:

<link rel="stylesheet" href="animate.min.css">

и в класс объекта пропишите animated название анимации:

<h1 class="animated tada">Анимация</h1>

Для динамического изменения анимации воспользуйтесь JavaScript:

$('#yourElement').addClass('animated tada');

А теперь давайте попробуем создать свою анимацию. Для этого нам понадобятся свойства CSS3.

Transforms

Трансформирует элемент с помощью методов.

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Метод Описание Пример
translate() Передвигает элемент на указанную позицию. transform: translate(50px,100px);
rotateX() вращает элемент по оси Х. transform: rotateX(20deg);
rotateY() вращает элемент по оси Y. transform: rotateY(20deg);
rotateZ() вращает элемент по оси Z. transform: rotateZ(20deg);
scale() масштабирует элемент. transform: scale(2,3);
skewX() наклоняет элемент по оси Х. transform: skewX(20deg);
skewY() наклоняет элемент по оси Y. transform: skewY(20deg);
skew() наклоняет элемент по оси Х и Y. transform: skew(20deg);
matrix() комбинирует методы rotate, scale, translate и skew transform: matrix(1, -0.3, 0, 1, 0, 0);

Transitions

Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript. Для примера, давайте возьмем свойство opacity:

.class {
opacity: 0.1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.class:hover {
opacity: 1;
}

В данном примере мы имеем некий элемент с прозрачностью 0.1, при наведении на него курсора прозрачность переходит из 0.1 в 1 за 1 секунду времени. Также в качестве первого значения Вы можете использовать любое свойство CSS (top, left, width и другие).

Animations

Суть анимации делится на два пункта:

  1. Создание анимации (изменения).
  2. Поведение анимации.

Для примера возьмем простое изменение цвета элемента:

@keyframes changecolor{
    from {background-color: red;}
    to {background-color: yellow;}
}
@-webkit-keyframes changecolor{
    from {background-color: red;}
    to {background-color: yellow;}
}

Теперь эту анимацию нам нужно вывести с поведением:

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: changecolor;
    animation-duration: 2s;
    animation-delay: 1s;
}

В этой таблице приведены все свойства animation с их возможными значениями.

Свойство Описание Пример
animation-name Название анимации changecolor
animation-duration Время анимации 2s
animation-delay Задержка перед воспроизведением анимации 1s
animation-iteration-count Количество воспроизведений анимации
  • 3
  • infinite - бесконечное количество
animation-direction Направление анимации
  • reverse - в обратном порядке
  • alternate - вперед, назад, вперед и т.д.
animation-timing-function Поведение анимации
  • ease - замедленный старт, быстро, замедленное окончание (используется по умолчанию)
  • linear - равномерное
  • ease-in - замедленный старт
  • ease-out - замедленное окончание
  • ease-in-out - замедленный старт и окончание

В виде альтернативы можно использовать обобщенный метод animation:

div {
    animation: changrcolor 5s linear 2s infinite alternate;
}

На этом мой экскурс по анимации завершен, спасибо за внимание! До новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.