8 простых, но эффектных примеров CSS3 анимации

14-09-23 root Css Animation 9

CSS3 предоставляет практически неограниченные возможности для UX разработчиков и, что очень круто — большинство из них очень просто реализовать.

Всего несколько строк кода могут создать эффектную анимацию, которая впечатлит ваших посетителей и повысит доверие к вашему сайту и, при правильном использовании, может повысить конверсию.

В этой статье мы напишем несколько простых, но очень интересных эффектов анимации на чистом CSS3.

HTML

Все эффекты управляются CSS свойством transition, поэтому разметка для примера очень проста:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Теперь зададим высоту, ширину, цвет фона (чтобы видеть, что происходит) и свойство перехода (transition):

<style type="text/css">
body > div
{
    width:483px;
    height:298px;
    background:#676470;
    transition:all 0.3s ease;
}
</style>

Свойство transition имеет три параметра: свойство к которому применяется (в нашем случае все), скорость перехода (у нас — 0.3 сек) и применяемый эффект (ease). Все это означает, что все изменения, происходящие с нашим элементом будут выполняться плавно (в течение 0.3 сек).

Осталось только изменить внешний вид элемента и анимация будет сделана за нас.

1. Fade in

Fade эффекты очень популярны, это хороший способ привлечь внимание к чему-либо.
Этот эффект реализуется в два этапа: первое, устанавливается начальное значение прозрачности; далее — изменение состояния, например, при наведении курсора:

.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

Не забудьте присвоить класс «fade» вашему div’у.

2. Изменение цвета

Изменение цвета раньше было непростой задачей, с применением сложных математических хитростей для вычисления отдельных RGB значений и их комбинаций. Сейчас, достаточно задать соответствующий цвет с помощью CSS и плавная анимация будет сделана за нас:

.color:hover
{
    background:#53a7ea;
}

3. Расширение и сужение

Для расширения элемента раньше нужно было изменять ширину (width), высоту (height) или отступы (padding), но сейчас мы можем использовать CSS свойство transform для увеличения.

Примените класс «grow» к вашему элементу и добавьте следующий код к вашим стилям:

.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

Уменьшить элемент можно так же просто как и увеличить. Для увеличения используйте значение параметра больше 1, для уменьшения — меньше 1:

.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

4. Вращение

CSS свойство transform имеет множество вариантов применений, один из лучших — вращение элемента. Класс «rotate»:

.rotate:hover
{
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

5. Сглаживание углов

Очень популярный эффект анимации — переход от квадратного элемента к круглому и наоборот. Этот эффект очень легко реализовать с помощью CSS: надо всего-лишь изменить свойство border-radius.
Класс «circle»:

.circle:hover
{
    border-radius:50%;
}

6. 3D тень

Этот эффект достигается с помощью добавления свойства box-shadow и перемещения элемента вдоль оси x с помощью свойств transform и translate. Таким образом создается эффект поднятия элемента.
Класс «threed»:

.threed:hover
{
    box-shadow:
        1px 1px #53a7ea,
        2px 2px #53a7ea,
        3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}

7. Покачивание

Не все эффекты создаются с помощью свойства transition. Мы также можем создавать сложные эффекты анимации с помощью свойств @keyframes, animation и animation-iteration.

Для этого сначала надо создать анимацию в ваших стилях. Обратите внимание, что для совместимости необходимо использовать @-webkit-keyframes одновременно с @keyframes:

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

Эта анимация просто передвигает элемент справа налево, осталось только применить её:

.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

8. Inset border

Один из популярных видов кнопок — кнопки без фона, но с массивными рамками. Конечно, рамки можно реализовать просто добавив свойство border, но это изменит размеры самого элемента. Это можно исправить с помощью свойства box-sizing, но легче использовать для анимации рамок свойство box-shadow.

Класс «border»:

.border:hover
{
    box-shadow: inset 0 0 0 25px #53a7ea;
}

На этом всё!

Смотрите также

9 Комментариев

андр says:

25.01.2015 в 12:22 дп

Спасибо!!!

Ответить
Яков says:

06.03.2015 в 12:42 дп

Молодцы,очень разумно все сделано. Просто палец вверх.

Ответить
Алексей says:

21.04.2015 в 2:47 пп

отличные примеры, молодцы!!!

Ответить
Владислав says:

13.07.2015 в 3:05 пп

Не получается плавно…

Ответить
1. Кирилл says:
  
  07.01.2016 в 7:57 пп
  
  Сделай не
  
  body > div
  {
  width:483px;
  height:298px;
  background:#676470;
  transition:all 0.3s ease;
  }
  
  А
  
  body > div
  {
  width:483px;
  height:298px;
  background:#676470;
  transition:all 0.3s;
  }
  
  Ответить
Александр says:

15.10.2015 в 12:35 пп

Хорошие примеры.
Правда я искал примеры анимации без наведений и прочих действий мышью…
Нет ли в вашем арсенале анимации изменения размера сразу после загрузки блока?

Ответить
Олег says:

20.06.2016 в 2:33 пп

7й пример «Покачивание» у меня как качели раскачивается.
А как сделать, чтобы было как у вас, только по горизонтали?

Ответить
Елена says:

09.07.2016 в 9:36 дп

Здравствуйте! Мне понравился эффект сглаживания углов. Я в ксс новичок, и не понимаю, куда конкретно вставлять этот код. Между каких тегов? помогите пожалуйста))

Ответить
Петр says:

04.11.2016 в 4:59 пп

Просто и красиво.
Супер. Доволен.

Ответить

ezcode