Как создать плавную EASE-анимацию на CSS3

С новейшими возможностями CSS3, переход от одного стиля к другому без использования JavaScript или Flash стал реальностью.

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

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

Для успешного завершения практики по данной статье вам понадобится:

  • Изображения (можно скачать здесь или выбрать на свое усмотрение);
  • Viga Font (Google Font).

Скачать исходные файлы

Просмотреть демонстрацию

Содержание

Морфинг

В этой части статьи, я покажу, как осуществить плавное перетекание (морфинг) квадрата в круг. Для анимации используется свойство transition со значением all 1s ease.

Это значит, что при пересечении изображения квадрата курсором мыши, оно будет плавно превращаться в круг в течение одной секунды. Также, придадим радиус 50% для создания идеального круга при трансформации.

Как создать впечатляющую 3D графику в CSS3

HTML

Наша разметка будет состоять из контейнера <div> с заданными классами morph (для эффекта морфинга) и img (для стилизации изображений), а также помещенного внутрь него тега <img>:

<div class="morph img">
    <img  src="img/image1.jpg"/>
</div>

CSS

Зададим изображениям размер 200 на 200 пикселей и белую границу толщиной в 10 пикселей. Также установим свойство radius в значение 15px для создания плавных углов.

Свойству overflow зададим значение hidden. Для того чтобы курсор мыши приобретал значение указателя при нахождении над элементом и выделял его, установим свойство cursor:pointer:

.img {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  -webkit-border-radius: 15px;
   border-radius: 15px;
  overflow: hidden;
}
 
.img:hover {
  cursor: pointer;
}

Мы получили эффект морфинга, используя CSS3-свойство transition. Определим для этого свойства префиксы, чтобы пример работал во всех браузерах (-webkit, -moz, -ms, -o) и установим значение all 1s ease.

Таким образом, перетекание одного стиля в другой при наведении курсора мыши будет осуществлено за 1 секунду.

Чтобы досконально разобраться в том, как работает свойство transition, ознакомьтесь с его синтаксисом:

transition: [transition-property] [transition-duration] [transition-timing-function];
  • [transition-property] предназначено для определения тех свойств, к которым будет применяться анимация (например, background, width и так далее). В нашем примере, мы используем значение all, что означает анимирование всех свойств. Поэтому и свойство background и свойство padding будет анимировано;
  • [transition-duration] отвечает за скорость анимации или перехода. В нашем примере, мы используем значение 1s. Это значит, что анимация будет длиться в течение одной секунды. Заметьте, что если данный параметр не задан, то переход осуществлен не будет;
  • [transition-timing-function] определяет функцию скорости во время перехода. Значение по умолчанию ease. Это значит, что переход сначала будет идти медленно, затем ускорится, после чего опять замедлится. Здесь можно узнать подробнее о свойстве transition-timing-function.

Далее, добавим стили для состояния нахождения курсора мыши над элементом. Добавим белую границу в 10 пикселей и зададим border-radius в значение 50%, что даст нам идеальную фигуру круга при пересечении активной области курсором мыши.

Также добавим свечения с помощью box-shadow:

.morph {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
   transition: all 1s ease;
}
 
.morph:hover {
  border: 10px solid #fff;
   border-radius: 50%;
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
 
}
Как создать выпадающее меню на CSS3 без программирования
CSS

Смещение

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

HTML

Разметка та же что и в предыдущем примере, но теперь добавим класс zoom рядом с img в контейнере <div>:

<div class="zoom img">
            <img src="img/image2.jpg"/>
</div>

CSS

Для создания эффекта определим базовую ширину и высоту 200 на 200 пикселей. Далее, вновь применим эффект transition, но на этот раз зададим длительность в две секунды. При наведении курсора мыши, мы просто прибавим по 100 пикселей к высоте и ширине, создав иллюзию оптического увеличения.

В этом примере задание свойства overflow: hidden уже не требуется. Также, добавим box-shadow для создания эффекта свечения:

.zoom img {
  width: 200px;
  height: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
   transition: all 2s ease;
}
 
.zoom img:hover {
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}
CSS

Позиционирование

В данном примере мы будем немного поворачивать изображение. Мы можем настроить угол поворота и скорость выполнения анимации.

Вы можете определить, на сколько градусов повернуть объект с помощью свойства transform. Transform это эффект, позволяющий изменять форму, размер и расположение объекта. Вы можете управлять углом поворота с помощью значения rotate(10deg) (в данном случае, поворот осуществляется на 10 градусов).

Как создать кнопку онлайн? 20 лучших инструментов для создания CSS3-кнопок

HTML

Разметка по-прежнему остается той же, меняется лишь класс на tilt вместо img в предыдущем примере:

<div class="tilt img">
    <img src="img/image3.jpg"/>
</div>

CSS

Снова добавим свойство transition, но на это раз нам не требуется медленное движение, поэтому зададим значение 0,3 мс.

При пересечении элемента курсором мыши, воспользуемся свойством transform. Оно позволяет поворачивать, масштабировать, двигать и скашивать элементы.

Добавим значение поворота на 10 градусов. Теперь, при нахождении курсора мыши над активной областью, изображение будет поворачиваться на 10 градусов вправо.

И наконец, добавим эффект свечения:

.tilt {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
   transform: rotate(10deg);
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
   box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
}
CSS

Цвет

В данном примере, мы превратим цветное изображение в черно-белое, используя свойство webkit filter при наведении курсора мыши.

Свойство web filter это графическая операция, управляющая отображением элемента в документе. Это похоже на инструменты Photoshop для управления цветом.

Зададим значение свойства transition в all 1s и при наведении курсора мыши, изображение плавно обесцветится.

HTML

И вновь, разметка остается практически той же – заменяем только класс на color:

<div class="color img">
<img src="img/image4.jpg"/>
</div>

CSS

Повторяем процесс из предыдущего примера для transition. Установим промежуток в 1 секунду, а функцию тайминга в ease. При наведении курсора мыши, применяя свойство webkit-filter мы уберем цвет изображения, превратив его в черно-белое.

И, наконец, добавим box-shadow для создания эффекта свечения:

.color {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.color:hover {
  -webkit-filter: grayscale(100%);
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
   box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40pxrgba(255,255,255,1);
 
}
CSS

Совет: вы также можете применять эффекты смазывания, сепии, инвертирования, насыщения цветом или манипуляции яркостью изображения или элемента при наведении курсора мыши, используя суффикс blur или brightness.

Просто добавьте значение внутри скобок.

Смазывание

-webkit-filter: blur(3px);

Сепия

-webkit-filter: sepia(100%);

Сепия

-webkit-filter: sepia(5%);

Инвертирование

-webkit-filter: invert(0.2);

Насыщение цветом

-webkit-filter: saturate(50%);

Заключение

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

В данной статье были освещены основы применения эффектов transitions, web filter, web transform на реальных примерах. Надеюсь, статья была вам полезна!

РедакцияПеревод статьи «How to Create Smooth CSS3 Animation Styles and Effects with Ease»