Лого SiteHere.ru

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

Анимация с помощью 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Повернем на 45 градусов по часовой.
Блок 3Сместим его вправо.
Блок 4Увеличим размер блока в два раза.


Блок 1
Блок 2
Блок 3
Блок 4

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

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

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

transform: translate(x,y)Смещение элемента на заданную x и y.
transform: rotate(Xdeg)Поворот элемента на X градусов по часовой.
transform: scale(X)Увеличение элемента в X раз.

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

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

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

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

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

Блок 1
Блок 2
Блок 3
Блок 4

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

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

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


Вывод

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

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

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


Успехов!

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

5 комментариев к записи
  • Яна

    Прикольно получается. Надо и себе попробовать такую фишку на сайте сделать.

     
    • Юрий

      Яна, этот урок показывает как легко и просто можно сделать CSS анимацию. А в следующих уроках будет показано на реальных элементах сайта, а не просто на блоках 🙂 .

       
  • Ярослав

    Юрий, для меня как для новичка твердолобого ➡ это выглядит почти волшебством! Я не волшебник, я только учусь, и постараюсь с Вашей помощью научиться!

     
    • Юрий

      Ярослав, и обязательно научитесь! Очень важно ваше желание этому научиться 🙂 .

       
  • Сергей

    Отличный урок, многому научился!

    Однако у меня остался вопрос, касательно анимации, вернее нюанс. Имеется слово (<p>). Необходимо сделать так что бы при наведении в определенную область это слово появлялось с увеличением непрозрачности и затем оставалось видимым до тех пор, пока курсор находится внутри области. Соответственно, когда курсор покидает область текст должен затухать.

    Саму анимацию я написал, она отлично работает. Однако не получается сделать так, чтобы слово держалось в области. Получается, что анимация проигрывается и слово сразу исчезает (изначально opacity: 0).

    Буду благодарен, если поможете решить мою проблему.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *