Главная > CSS/Style Sheets > 8 простых CSS3-переходов, которые точно удивят ваших посетителей

8 простых CSS3-переходов, которые точно удивят ваших посетителей


15 июля 2014, 18:00. Разместил: Design FactoRy
Спецификация CSS3 представила UX-дизайнерам невероятные возможности, и что самое интересное, – все это очень просто реализовать.

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

Сегодня мы хотим поделиться с вами подборкой из 8 простых, но удивительных эффектов, которые помогут вам привлечь внимание посетителей.

Все эти эффекты управляются посредством свойства transition. Итак, для того, чтобы увидеть эти эффекты в действии, нам нужно создать div-элемент на HTML-странице:

<!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 секунды), а также третье значение, которое позволяет вам изменять процесс вычисления ускорения и замедления, но его мы оставим по умолчанию.

Теперь, все что нам нужно сделать, это изменить свойства, и они будет анимированы так как нам требуется.

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

1. Fade In (Появление)

Такой эффект довольно востребован среди клиентов. Это отличный способ сделать акцент на функциональности и привлечь внимание к CTA-элементам.

Эффект появления реализуются в два этапа: сначала вы выставляете исходное состояние, а затем изменяете его при, к примеру, наведении курсора на элемент:

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

(Не забудьте выставить класс вашего div-элемента на fade, чтобы эффект заработал.)

8 простых CSS3-переходов, которые точно удивят ваших посетителей

2. Change Color (Изменение цвета)

Раньше было довольно сложно добиться эффекта изменения цвета, учитывая все эти вычисления отдельных RGB-значений. Теперь же, вы можете просто установить класс div’а на color и указать нужный вам цвет в коде CSS:

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

8 простых CSS3-переходов, которые точно удивят ваших посетителей

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);
}

8 простых CSS3-переходов, которые точно удивят ваших посетителей

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

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

8 простых CSS3-переходов, которые точно удивят ваших посетителей

4. Rotate Elements (Вращение элементов)

CSS Transforms можно использовать в различных задачах, среди которых можно выделить вращение элемента.

Задайте вашему div-элементу класс rotate и добавьте следующий CSS-код:

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

8 простых CSS3-переходов, которые точно удивят ваших посетителей

5. Square to circle (Преобразование квадрата в окружность)

Очень популярный эффект – преобразование квадрата в окружность и наоборот. Этот эффект стало очень просто реализовать при помощи CSS-кода: нам нужно просто добавить и изменить свойство border-radius.

Задайте вашему div-элементу класс circle и добавьте следующий CSS-код к вашим стилям:

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

8 простых CSS3-переходов, которые точно удивят ваших посетителей

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);
}

8 простых CSS3-переходов, которые точно удивят ваших посетителей

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 простых CSS3-переходов, которые точно удивят ваших посетителей

8. Inset border (Внутренний контур)

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

Задайте вашему div-элементу класс border и добавьте следующий CSS-код к вашим стилям:

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

8 простых CSS3-переходов, которые точно удивят ваших посетителей

Вернуться назад