Спецификация CSS3 представила UX-дизайнерам невероятные возможности, и что самое интересное, – все это очень просто реализовать.Всего пару строк кода позволяет вам добиться невероятных эффектов перехода, которые точно удивят ваших пользователей, сделают ваш сайт привлекательнее, и даже помогут увеличить уровень конверсии. Более того, эти эффекты поддерживаются аппаратным ускорением, и поэтому не влияют на скорость работы страниц.Сегодня мы хотим поделиться с вами подборкой из 8 простых, но удивительных эффектов, которые помогут вам привлечь внимание посетителей.Все эти эффекты управляются посредством свойства transition. Итак, для того, чтобы увидеть эти эффекты в действии, нам нужно создать div-элемент на HTML-странице:
Сделав это, выставите ширину и высоту (чтобы у элемента были собственные габариты), его цвет фона (чтобы его можно было видеть), а также примените свойство transition.
body > div
{
width:483px;
height:298px;
background:#676470;
transition:all 0.3s ease;
}
Свойство transition имеет три значения: свойства для переходов (в нашем случае все из них), скорости переходов (в данном случае 0,3 секунды), а также третье значение, которое позволяет вам изменять процесс вычисления ускорения и замедления, но его мы оставим по умолчанию.Теперь, все что нам нужно сделать, это изменить свойства, и они будет анимированы так как нам требуется.
Если вы хотите продолжить изучение данной статьи, предлагаем вам скачать демо-файлы.
1. Fade In (Появление)
Такой эффект довольно востребован среди клиентов. Это отличный способ сделать акцент на функциональности и привлечь внимание к CTA-элементам.Эффект появления реализуются в два этапа: сначала вы выставляете исходное состояние, а затем изменяете его при, к примеру, наведении курсора на элемент:
.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}(Не забудьте выставить класс вашего div-элемента на fade, чтобы эффект заработал.) 
2. Change Color (Изменение цвета)
Раньше было довольно сложно добиться эффекта изменения цвета, учитывая все эти вычисления отдельных RGB-значений. Теперь же, вы можете просто установить класс div’а на color и указать нужный вам цвет в коде CSS:
.color:hover
{
background:#53a7ea;
}
3. Grow & Shrink (Увеличение и уменьшение)
Чтобы увеличить элемент, раньше нужно было изменять свойства width и height, а также устанавливать отступы. Теперь же, мы можем просто использовать CSS3-свойство transform.Установите класс вашего div-элемента на 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. Rotate Elements (Вращение элементов)
CSS Transforms можно использовать в различных задачах, среди которых можно выделить вращение элемента. Задайте вашему div-элементу класс rotate и добавьте следующий CSS-код:
.rotate:hover
{
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
5. Square to circle (Преобразование квадрата в окружность)
Очень популярный эффект – преобразование квадрата в окружность и наоборот. Этот эффект стало очень просто реализовать при помощи CSS-кода: нам нужно просто добавить и изменить свойство border-radius.Задайте вашему div-элементу класс circle и добавьте следующий CSS-код к вашим стилям:
.circle:hover
{
border-radius:50%;
}
6. 3D Shadow (Трехмерная тень)
Трехмерных теней долгое время сторонились, так как они не очень сочетаются с институтом плоского дизайна, что на самом деле нонсенс, так как они помогают отлично украшать элементы и привлекать внимание.Этого эффекта можно добиться путем добавления свойства box-shadow, и последующего перемещения элемента по оси Х при помощи свойств transform и translate.Задайте вашему div-элементу класс threed и добавьте следующий CSS-код к вашим стилям:
.threed:hover
{
box-shadow:
1px 1px #53a7ea,
2px 2px #53a7ea,
3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
7. Swing (Качание)
Не всем элементам подходит свойство transition. Мы также можем создавать действительно комплексные анимации при помощи @keyframe, animation и animation-iteration.В данном случае, нам нужно сначала определить CSS-анимацию в наших стилях. Вы заметите, что ввиду проблемам с реализацией, нам нужно использовать @-webkit-keyframes и @keyframes (да-да, Internet Explorer на данный момент работает лучше Chrome, при всем уважении к последнему).
@-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, однако гораздо проще будет использовать переход в border при помощи inset-box-shadow.Задайте вашему div-элементу класс border и добавьте следующий CSS-код к вашим стилям:
.border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}