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

CSS3 очень мощная технология. Я думаю вы знаете о том, что с помощью CSS3 можно создавать анимацию без использования Javascript. Нужно лишь знание HTML и CSS3. Это ведь классно, не правда ли? Вы наверное думаете что это сложное дело — анимации на CSS3 и вы даже не хотите браться за это. Тогда посмотрите этот урок и вы поймете, что создание анимаций на CSS это не очень тяжелая работа. Это первый урок из цикла посвященному анимации с помощью CSS преобразований. Вы на примере убедитесь что ничего сложного и страшного здесь нет.

Примеры будут работать в браузерах Firefox, Chrome, Safari и Internet Explorer 10. К сожалению, в старых браузерах вы не увидите этих эффектов и преобразований, или же преобразования будут происходить без анимации.

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

Браузеры Firefox и Opera поддерживают сейчас преобразования с почти идентичным синтаксисом. Нужно лишь использовать соответствующие префиксы -moz-, -o- и -webkit-.

Internet Explorer 10-й версии поддерживает свойства переходов без префикса. Но для превью версии IE10 нужно использовать префикс -ms-.

• -webkit-transition
• -moz-transition
• transition

• -webkit-transition
• -moz-transition
• -ms-transition
• transition

Мы опустили префикс -o, потому что теперь Opera распознает webkit свойства.

Статические преобразования

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

Это легко продемонстрировать в следующем примере:

Вот исходный код этих блоков:

1
2
3
4

<div class="showbox" style="transform: translate(-1.3em,-1em); border-color: #E173C5;">Блок 1</div> 
<div class="showbox" style="transform: rotate(45deg); border-color: #0C09E1;">Блок 2</div> 
<div class="showbox" style="transform: translate(2em,0);border-color:#04C71B;">Блок 3</div>
<div class="showbox" style="transform: scale(2); border-color:#C71729;">Блок 4</div>

А вот их стили:

1
2
3
4
5
6
7
8
9
10

.showbox { 
    float: left; 
    margin: 4em 1em; 
    width: 100px; 
    height: 60px; 
    border: 2px solid;
    background-color: #fff;
    line-height: 60px; 
    text-align: center; 
}

Небольшое пояснение какое свойство что делает:

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

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

Анимация преобразований

CSS преобразования позволяют разработчикам и дизайнерам создавать очень красивые вещи на сайте при этом не прибегая к использованию Javascript. Посмотрите на примеры анимации ниже (просто наведите курсор мыши на каждый блок):

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

Для примера я покажу как сделать анимацию на примере первого блока. В файле стилей нужно разместить вот это:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.showbox { 
    float: left; 
    margin: 4em 1em; 
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff; 
    line-height: 60px;
    text-align: center; 
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out; 
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
 
.slidelefttop:hover { 
    -webkit-transform: translate(-1.3em,-1em); 
    -moz-transform: translate(-1.3em,-1em); 
    -o-transform: translate(-1.3em,-1em); 
    -ms-transform: translate(-1.3em,-1em);
    transform: translate(-1.3em,-1em);
    cursor:pointer;
 }

А в HTML код:

1

<div class="showbox slidelefttop" style="border-color: #E173C5;">Блок 1</div>

!!! В качестве домашнего задания попробуйте создать анимацию всех 4-х блоков.

Но если вы не можете увидеть анимацию в связи с тем, что ваш браузер не поддерживает эти свойства, ниже есть GIF изображение (если нет анимации — подождите, пусть загрузится):

Вывод

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

Если появятся вопросы — пишите в комментариях, обязательно разберемся!

В следующей части рассмотрим анимацию на реальных примерах.

Успехов!

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