Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация

Это заключительный урок из серии «Анимация с помощью CSS преобразований». Я надеюсь что вы изучили предыдущие уроки и вы хорошо понимаете что CSS преобразования могут значительно облегчить создание определенных эффектов на сайте. При этом всё достаточно просто, ведь для анимации нужно лишь несколько строчек в файле стилей. В этой статье мы посмотрим функции синхронизации и каким образом можно влиять на один элемент через другой.

Предыдущие уроки из серии «Анимация с помощью CSS преобразований» вы найдете по следующим ссылкам:

• Анимация с помощью CSS преобразований. Часть 1 — введение
• Анимация с помощью CSS преобразований. Часть 2 — реальный пример

Примеры будут корректно работать в браузерах Firefox, Chrome, Safari и Internet Explorer 10.

Также напоминаю, что анимации работают только при наведении!!!

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

Функции синхронизации

В этом примере мы рассмотрим 4 различных перехода с 4-мя различными функциями синхронизации.

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

Для тех, кто еще не перешел на новый браузер небольшое видео:

В расположении блоков в HTML нет ничего необычного:

1
2
3

<div id="stage">Фон
    <div id="block">Блок</div>
</div>

А вот на CSS необходимо немного остановиться и внимательно посмотреть:

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

#stage {
    background: none repeat scroll 0 0 #efefef;
    height: 300px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
 
/*Начальное значение блока*/
#block {
    background: none repeat scroll 0 0 #00f;
    color: #fff;
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
 
    /*Обратите внимание на свойство ниже*/
    transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, transform 1s ease-in-out 1s;
    width: 100px;
}
 
/*Конечные значения блока после анимации*/
#stage:hover #block {
    background: none repeat scroll 0 0 red;
    left: 300px;
    top: 200px;
    transform: rotate(360deg);
}

Здесь я хочу обратить внимание на свойство, которое я прокомментировал в CSS:

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

Также это свойство является сокращенной формой следующий свойств:

1
2
3
4

transition-property: left, top, background, transform;
transition-duration: 2s, 2s, 1s, 1s;
transition-delay: 0s, 0s, 0s, 1s;
transition-timing-function: ease, ease-out, ease-in, linear, ease-in-out;

Что же мы сделали? А вот что: мы все части из каждого параметра (у нас их четыре на изображении выше) записали по порядку в свойства transition-property, transition-duration, transition-delay и transition-timing-function.

А сейчас посмотрим что же это за свойства такие в которые мы переписали все эти параметры:

• transition-property — здесь указывается свойство, которое будет изменяться в процессе трансформации. В нашем случае мы изменяем положение блока с помощью свойств left и top, с помощью background мы изменяем цвет блока и, наконец, с помощью transform мы переворачиваем блок (но указываем это немного позже, а здесь лишь показываем что трансформация блока будет).
• transition-duration — здесь задаем длительность анимации.
• transition-delay — указываем время, через которое происходит трансформация. Например, блок в нашем примере поворачивается только через 1 секунду после того, как блок начал двигаться.
• transition-timing-function — здесь нужно задавать функции анимации. Об этих параметрах можно написать очень много, но я скажу лишь что, при каждом из наших параметров (ease, ease-out, ease-in, linear и ease-in-out) анимация происходит с разной скоростью.

Как влиять на элемент через элемент

Надеюсь вы разобрались в том, каким образом мы делали анимацию и совмещать при этом несколько свойств. Поэтому двигаемся дальше.

Немного сложным кажется название этой части статьи, вам не кажется? 🙂 . Но суть состоит в том, чтобы при наведении на один элемент мы могли каким-либо образом «влиять» другой элемент.

При наведении на первый блок — первый блок увеличивается, а второй катится вправо превращаясь в круг. При наведении на второй блок — он увеличивается по ширине.

Убедитесь в этом самостоятельно ниже:

Чтобы не обидеть тех, у кого браузеры не поддерживают технологию CSS преобразований:

В HTML два блока находятся на одном уровне:

1
2
3
4

<div id="stage3">
    <div id="box3">Блок 1</div>
    <div id="box4">Блок 2</div>
</div>

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

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

/* фон */ 
#stage3 {
    background: none repeat scroll 0 0 #efefef;
    height: 100px;
    position: relative;
    text-align: right;
}
 
/* Блок 1 - начальные свойства */ 
#box3 {
    background: none repeat scroll 0 0 red;
    border: 1px solid #666;
    color: #fff;
    height: 100px;
    position: absolute;
    transition: all 1s ease-in-out 0s;
    width: 100px;
}
 
/* Блок 1 - конечные свойства для анимации при наведении */ 
#box3:hover {
    width: 600px;
}
 
/* Блок 2 - начальные свойства */ 
#box4 {
    background: none repeat scroll 0 0 #00f;
    border: 1px solid #666;
    color: #fff;
    height: 100px;
    left: 120px;
    position: absolute;
    transition: all 1s ease-in-out 0s;
    width: 100px;
}
 
/* Блок 2 - конечные свойства для анимации при наведении */ 
#box4:hover {
    width: 500px;
}
 
/* Внимание! Здесь при наведении на первый блок изменяется он, а также второй блок трансформируется в круг*/
#box3:hover + #box4 {
    background: none repeat scroll 0 0 #ff0;
    border-radius: 50px;
    color: #000;
    left: 627px;
    transform: rotate(360deg);
}

Обратите внимание на знак «+«, с помощью которого мы можем «связать» два элемента на странице.

Вывод

Этим уроком я хочу закончить серию статей «Анимация с помощью CSS преобразований». Обязательно пройдите предыдущие уроки (ссылки есть в начале статьи). Сейчас вы уже знакомы с тем, каким образом можно сделать анимацию используя преобразования на CSS. Что вы будете уметь в дальнейшем зависит только от того, сколько времени вы посвятите практике при изучении CSS преобразований. Ведь с помощью преобразований можно делать действительно красивые и оригинальные эффекты на сайте.

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

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

Успехов!

С Уважением, Юрий Немец