Свойство CSS Transition

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active, т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

transition: [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>;

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

  • <transition-property>
  • <transition-duration>
  • <transition-timing-function>
  • <transition-delay>

Примеры со свойством Transition

Пример #1. Анимация в html через transition

<html>
<head>
<style>
.primer1{
width:100px;
height:100px;
background:#444;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
.primer1:hover{
width:120px;
height:120px;
background:#AAA;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="primer1"></div>
</body>
</html>

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

  • all – плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color, тогда плавный переход распространился бы только на цвет
  • 1s – время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
  • linear – объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)



Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform.

Пример #2. Увеличение объекта в html без смещения других объектов

<html>
<head>
<style>
.primer2{
width:100px;
height:100px;
background:#444;
margin:30px;
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
.primer2:hover{
width:100px;
height:100px;
background:#AAA;
margin:30px;
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
</head>
<body>
<div class="primer2"></div>
</body>
</html>

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

  • all – ко всему объекту (можно опустить, если задано время)
  • color – к цвету текста
  • background – к цвету фона объекта
  • width, height – к изменению габаритов по ширине и высоте соответственно
  • none – анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

0s

0.5s

1s

2s

3s

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration: 1s;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function

transition-timing-function: value;

Где value может принимать значения:

  • ease (значение по умолчанию) – замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear – равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in – замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out – замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out – замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start – мгновенный старт, равносильно параметру steps(1, start)
  • step-end – мгновенное исполнение в конце, равносильно параметру steps(1, end)
  • cubic-bezier(a1,b1,a2,b2) – задание собственного изменения скорости
  • steps(a,b) – изменение рывками

Например

linear

ease

ease-in

ease-out

ease-in-out

step-start

step-end

steps(3)

steps(10)






4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

0s

0.5s

1s

2s

3s

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

<html>
<head>
<style>
.raznye_zaderzhki {
width: 100px;
height: 100px;
background: #444;
margin: 30px;
font-size: 14px;
color: #0f0;
border: 3px solid #bbb;
transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
-moz-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
-webkit-transition: font-size 3s linear,background-color 1s linear, color 1s ease-in-out, width 2s ease;
-o-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
}
.raznye_zaderzhki:hover {
background-color: #000;
color: #0ff;
width: 500px;
font-size: 23px;
}
</style>
</head>
<body>
<div class="raznye_zaderzhki"></div>
</body>
</html>

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

  • -ms-transform-origin – для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform-origin – для Chrome, Safari, Android и iOS
  • -o-transform-origin – для Opera до версии 12.10
  • -moz-transform-origin – для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

[window.]document.getElementById("elementID").style.transition



Читайте также:

• Как сделать треугольник через CSS

• Свойство display

• Свойство transform-origin

• Свойство transition

• Свойство nth-child

• Свойство font

• Свойство overflow

• Свойство box-shadow

• Медиа запросы (@)


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.