8 простых эффектов с использованием свойства CSS3 Transition

      CSS

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development. Они помогут вам реализовать любой сложный проект.

Поддержка браузеров

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.
CSS3 Transition - поддержка браузеров

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

1
2
3
4
5
6
7
8
.experiment
{
    width:400px;
    height:200px;
    background:#676470;
    /* главное свойство */
    transition:all 0.3s ease;
}

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая (transition-delay далее в таблице).

Наименование Описание Значение
transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

Затемнение или осветление элементов на странице — довольно популярный способ обратить внимание посетителей на что-либо. Данный эффект кодируются в два этапа: во-первых, установить начальное состояние; Затем нужно задать изменение, например при наведении курсора:

1
2
3
4
5
6
7
8
.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

Далее живой пример:

Наведи

2. Смена цвета

Еще один из наиболее популярных эффектов — смена цвета элемента:

1
2
3
4
.color:hover
{
    background:#53a7ea;
}
Наведи

3. Внутренняя граница

Один из самых часто используемых стилей для кнопок при наведении это появление границы кнопки. Мы можем, добавить рамку (border) к элементу, но это повлечет изменение размера элемента и как следствие положения — что не есть хорошо. Конечно, данную проблему можно решить, однако куда проще использовать тень внутри элемента.

1
2
3
4
.border:hover
{
    box-shadow: inset 0 0 0 20px #53a7ea;
}
Наведи

4. Изменение формы

Еще одним из часто используемых эффектов является изменение формы элемента, например прямоугольник в овал и тд. С помощью CSS, выполнить это очень просто, достаточно описать класс для наведения и задать отличное от первоначального значение свойства border-radius.

1
2
3
4
.circle:hover
{
    border-radius:50%;
}
Наведи

5. Увеличение и уменьшение

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

1
2
3
4
5
6
.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}
Наведи

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

1
2
3
4
5
6
.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
Наведи

6. Поворот

CSS3 Transform имеют целый ряд различных вариантов использования, один из лучших — поворот элемента:

1
2
3
4
5
6
.rotate:hover
{
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
Наведи

7. 3D тень

Не так давно стало популярно использовать в дизайне веб-сайтов 3D тени на ряду с Flat дизайном. Сам же эффект тени и выпуклости достигается за счет плавного смещения элемента по горизонтали и добавления тени. Примерно вот так:

1
2
3
4
5
6
7
8
9
.threed:hover
{
    box-shadow:
           1px 1px #53a7ea,
           2px 2px #53a7ea,
           3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}
Наведи

8. Колебание

На последок пожалуй самый сложный из представленных вариант реализации анимации с помощью CSS3. Будет выполнен целый комплекс действий над элементом, и все это благодаря правилу @keyframes, и свойствам animation и animation-iteration. Сначала описываем анимацию CSS свойств (используем для Chrome префикс -webkit):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@-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);
    }
}

Эта анимация просто перемещает элемент влево и вправо:

1
2
3
4
5
6
7
.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
Наведи



На этом всё. Конечно все выше представленные эффекты не полноценные (не готовы для рабочего применения), однако прекрасные для понимания того, что и с помощью CSS теперь можно выполнять над элементами веб-страницы различные действия для создания «живого сайта».

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!