Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Свойство css transition — то что надо для создания красивых анимаций на блоге

Приветствую всех, кто очутился на странице данной публикации. Сегодняшняя статья посвящена очень интересной тематике, в которой важно уметь разбираться и владеть. Это css transition. На сегодняшний день многие веб-сервисы используют анимации и transition занимает весомое место среди этого раздела.

Поэтому я расскажу вам о всех плюшках и особенностях данного элемента, перечислю существующие свойства, связанные с transition, и приведу наглядные примеры. Знаю, что вам не терпится начать обучение, поэтому вперед!

И все-таки объект «переходит»!

В одной из предыдущих статей, связанной с анимацией текста css-средствами, я делал сравнение transition с animation. Если вы хотите углубить свои знания, то после этой статьи можете прочесть и ту.

Данный прекрасный элемент появился вместе с новой спецификацией каскадных таблиц css3.

Если обратить внимание на английское название свойства, то можно сразу понять, о чем пойдет речь. Так как этот термин переводится как «переход», то становится ясно, что он отвечает за анимационные переходы объектов из одного состояния в другое. С его помощью нельзя описать промежуточные состояния анимаций, а только начальную и конечную точки.

Transition переход

Однако хочу подчеркнуть, что описываемое свойство отвечает за плавное изменение состояний. Поэтому если вам нужно реализовать анимированное и мягкое изменение формы какого-либо объекта на веб-странице (например, кнопки), то выбор делайте в сторону переходов. Это и есть главная особенность transition.

Основные свойства

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

Однако есть несколько свойств, отвечающих за конкретные значения. Ниже для наглядности я перечислил их и структурировал в таблицу.

Элемент Характеристика
transition-property Отвечает за объекты, к которым будет применяться эффект. Можно указать:

·       Несколько названий;

·       Все, используя слово all;


·       Отменить анимацию – none.
transition-timing-function Отвечает за изменение скорости отображения эффектов. Предусмотрено 9 встроенных ключевых слов: easy, linear, steps, easy-in,step-start, easy-out, step-end, easy-in-out, cubic-bezier. Чтобы точно запомнить, как они работают, запустите в коде каждое значение.
transition-duration Указывает продолжительность перехода. Параметр измеряется секундами.
transition- delay Этот параметр также устанавливается в секундах, однако он отвечает за задержку анимации.

Существуют такие задачи, когда нужно определить всего лишь 2-3 значения, для этого и были созданы отдельные свойства.

Если же необходимо описать все свойства, то лучше это сделать одновременно через transition. Общая форма такой инициализации выглядит вот так:

transition: property duration timing-function delay;

Проверка на совместимость

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

Итак, если версии Chrome и Safari старее, чем 26.0 и 6.1 соответственно, то стоит использовать -webkit-transition, которое также применяется к iOS и Android.

В Opera используется свойство -o-transition вплоть до 12.10, а в Firefox ниже 16.0 – -moz-transition.

Практическая часть

Вот и пришло время, которого, я уверен, вы ждали. Практика! Для начала я создал квадратную фигуру. При наведении на нее курсора, с ней происходят изменения.

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Прокрутка квадрата</title>
  <style>
body {background: #BfBEBE;}
     #color_box {
    border: 7px double #F8F8FF;
    margin-left:39%;
    display: block;
    height: 282px;
    width: 282px;
    background-color: #68318b;
    -webkit-transition: height 2.5s, width 2.5s,  background-color 2.5s, -webkit-transform 2.5s;
    transition: height 2.5s, width 2.5s,  background-color 2.5s, transform 2.5s;
}
 
#color_box:hover {
    background-color: #FFEBCD;
    opasity: 0.2;
    width: 160px;
    height: 160px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
  </style>
 </head>
 <body>
   <div id="color_box"></div>
 </body>
</html>

Обратите внимание на #color_box:hover.

:hover – это псевдокласс, который указывает, что с объектом будут производиться какие-то действия при наведении на него курсора. Его возможностями пользуются постоянно, если нужно организовать анимацию.

Теперь вы владеете фундаментом написания анимированных переходов. Если вам хочется попрактиковаться или быстро сгенерировать какой-то эффект, то я советую воспользоваться онлайн-решениями как, например, «css3 generator».

Подписывайтесь на мой блог и обязательно рассказывайте о нем своим друзьям. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 5 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: