Содержание

transition | CSS | WebReference

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Краткая информация

Значение по умолчанию all 0s ease 0s
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

none
Отменяет эффект перехода.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>transition</title> <style> #bar { top:-5.5em; right:5em; /* Положение */ padding: .5em; /* Поля */ margin: 0; /* Отступы */ position: absolute; /* Абсолютное позиционирование */ width: 2em; /* Ширина */ background: #333; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ /* Переход */ transition: top 1s ease-out 0.5s; } #bar:hover { top: 0; } </style> </head> <body> <ul> <li>1</li><li>2</li> <li>3</li><li>4</li> <li>&darr;</li> </ul> </body> </html>

В данном примере при наведении курсора на стрелку раскрывается блок с числами.

Объектная модель

Объект.style.transition

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition.

Opera до версии 12.10 поддерживает свойство -o-transition.

Firefox до версии 16 поддерживает свойство -moz-transition.

Спецификация

Спецификация Статус
CSS Transitions Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10 12 1 26 11.6 12.10 3 6.1 4 16
2.1 4.4 4 16 10 12.10 3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Transitions Переходы CSS уроки для начинающих академия



Переходы CSS

Переходы CSS позволяют изменять значения свойств плавно (от одного значения к другому) за заданную длительность.

Пример: Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:


Поддержка браузеров для переходов

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

Как использовать CSS переходы?

Чтобы создать эффект перехода, необходимо указать две вещи:

  • свойство CSS, к которому требуется добавить эффект
  • Длительность эффекта

Примечание: Если часть Duration не указана, переход не будет иметь эффекта, так как значение по умолчанию равно 0.

В следующем примере показан элемент 100px * 100px Red <div>. Элемент <div> также указал эффект перехода для свойства Width с длительностью 2 секунды:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}


Эффект перехода начнется, когда указанное значение свойства CSS (Width) изменится.

Теперь давайте укажем новое значение свойства Width, когда пользователь наносит указатель мыши на элемент <div>:

Пример

div:hover {
    width: 300px;
}

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



Изменение нескольких значений свойств

В следующем примере добавляется эффект перехода для свойства Width и Height с длительностью 2 секунды для ширины и 4 секунды для высоты:

Пример

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}


Укажите кривую скорости перехода

Свойство transition-timing-function указывает кривую скорости эффекта перехода.

Свойство «переход-синхронизация-функция» может иметь следующие значения:

  • ease — задает эффект перехода с медленным запуском, затем быстро, затем закончится медленно (по умолчанию)
  • linear — задает эффект перехода с одинаковой скоростью от начала до конца
  • ease-in — задает эффект перехода с медленным запуском
  • ease-out — задает эффект перехода с медленным концом
  • ease-in-out — задает эффект перехода с медленным началом и концом
  • cubic-bezier(n,n,n,n) — позволяет определить собственные значения в функции кубической Безье

В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:

Пример

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}


Задержка эффекта перехода

Свойство transition-delay указывает задержку (в секундах) для эффекта перехода.

Следующий пример имеет задержку в 1 секунду перед началом:

Пример

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}


Переход + трансформация

В следующем примере также добавляется преобразование в эффект перехода:

Пример

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}


Другие примеры перехода

Свойства перехода CSS можно задать по одному, например:

Пример

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

или с помощью сокращенного свойства transition:

Пример

div {
    transition: width 2s linear 1s;
}


Свойства перехода CSS

В следующей таблице перечислены все свойства перехода CSS:

Свойство Описание
transition Сокращенное свойство для задания четырех свойств перехода в одно свойство
transition-delay Указывает задержку (в секундах) для эффекта перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-property Задает имя свойства CSS, для которого используется эффект перехода
transition-timing-function Определяет кривую скорости эффекта перехода

8 простых эффектов с использованием свойства CSS3 Transition | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development. Они помогут вам реализовать любой сложный проект.

Поддержка браузеров

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

1
2
3
4
5
6
7
8

.experiment
{
    width:400px;
    height:200px;
    background:#676470;
    /* главное свойство */
    transition:all 0.3s ease;
}

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая (transition-delay далее в таблице).

Наименование Описание Значение
transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

Затемнение или осветление элементов на странице — довольно популярный способ обратить внимание посетителей на что-либо. Данный эффект кодируются в два этапа: во-первых, установить начальное состояние; Затем нужно задать изменение, например при наведении курсора:

1
2
3
4
5
6
7
8

.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

Далее живой пример:

Наведи

2. Смена цвета

Еще один из наиболее популярных эффектов — смена цвета элемента:

1
2
3
4

.color:hover
{
    background:#53a7ea;
}

Наведи

3. Внутренняя граница

Один из самых часто используемых стилей для кнопок при наведении это появление границы кнопки. Мы можем, добавить рамку (border) к элементу, но это повлечет изменение размера элемента и как следствие положения — что не есть хорошо. Конечно, данную проблему можно решить, однако куда проще использовать тень внутри элемента.

1
2
3
4

.border:hover
{
    box-shadow: inset 0 0 0 20px #53a7ea;
}

Наведи

4. Изменение формы

Еще одним из часто используемых эффектов является изменение формы элемента, например прямоугольник в овал и тд. С помощью CSS, выполнить это очень просто, достаточно описать класс для наведения и задать отличное от первоначального значение свойства border-radius.

1
2
3
4

.circle:hover
{
    border-radius:50%;
}

Наведи

5. Увеличение и уменьшение

Переходим к более интересным эффектам. Чтобы увеличить элемент, нам придется изменить его ширину и высоту. В этом на поможет свойство CSS3 Transform.

1
2
3
4
5
6

.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

Наведи

Уменьшение элемента выполняется так же просто, как и увеличение. Чтобы увеличить элемент мы указываем значение больше 1, чтобы уменьшить его, мы указываем значение меньше 1:

1
2
3
4
5
6

.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

Наведи

6. Поворот

CSS3 Transform имеют целый ряд различных вариантов использования, один из лучших — поворот элемента:

1
2
3
4
5
6

.rotate:hover
{
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

Наведи

7. 3D тень

Не так давно стало популярно использовать в дизайне веб-сайтов 3D тени на ряду с Flat дизайном. Сам же эффект тени и выпуклости достигается за счет плавного смещения элемента по горизонтали и добавления тени. Примерно вот так:

1
2
3
4
5
6
7
8
9

.threed:hover
{
    box-shadow:
           1px 1px #53a7ea,
           2px 2px #53a7ea,
           3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}

Наведи

8. Колебание

На последок пожалуй самый сложный из представленных вариант реализации анимации с помощью CSS3. Будет выполнен целый комплекс действий над элементом, и все это благодаря правилу @keyframes, и свойствам animation и animation-iteration. Сначала описываем анимацию CSS свойств (используем для Chrome префикс -webkit):

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

Эта анимация просто перемещает элемент влево и вправо:

1
2
3
4
5
6
7

.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Наведи


На этом всё. Конечно все выше представленные эффекты не полноценные (не готовы для рабочего применения), однако прекрасные для понимания того, что и с помощью CSS теперь можно выполнять над элементами веб-страницы различные действия для создания «живого сайта».

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

property | HTML и CSS с примерами кода

Свойство transition-property устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Переходы и Анимации

Синтаксис

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Примечание

  • Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition-property.
  • Opera до версии 12.10 поддерживает свойство -o-transition-property.
  • Firefox до версии 16 поддерживает свойство -moz-transition-property.

Значение по-умолчанию: all

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации

Поддержка браузерами

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition-duration</title>
    <style>
      body {
        margin: 0;
      }
      .menu {
        position: absolute;
        height: 100px;
        width: 100%;
        background: #fc0;
        border-bottom: 20px solid #333;
        top: -100px;
        /* Анимация */
        transition-property: top;
        transition-duration: 2s;
      }
      .menu:hover {
        top: 0;
      }
    </style>
  </head>
  <body>
    <div>
      А здесь у нас будет своё меню с преферансом и
      профурсетками.
    </div>
  </body>
</html>

CSS переходы (CSS transition) // «Фрилансер по жизни»

easeпо умолчанию

ease-in

ease-out

ease-in-out

linear

steps(int,start|end)

cubic-bezier(x1,y1,x2,y2)

Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease 0s;

}

/* все то же событие */

Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-in 0s;

}

/* все то же событие */

Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-out;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-out 0s;

}

/* все то же событие */

Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: ease-in-out;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s ease-in-out 0s;

}

/* все то же событие */

Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: linear;

}

.button_1:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s linear 0s;

}

/* все то же событие */

Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End — означало бы, что изменения нужно применять не в начале, а в конце каждого шага

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: steps(2,start);

}

.button_2{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: steps(2,end);

}

.button_1,

.button_2:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s steps(2,start) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */ transition: all 0.5s steps(2,end) 0s;

}

/* все то же событие */

Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию

Пользовательские функции cubic Bézier с сайта easings.net

Название Значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

CSS код:

/* общие стили кнопки и текста */

.button{

display: flex; text-align: center; justify-content:center; align-items: center; min-height: 60px; padding: 0px 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; border-radius: 10px; position: relative; top: 0;

}

/* стили для конкретной кнопки */

.button_1{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);

}

.button_2{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.75, 0.99, 0.21, 0.01);

}

.button_3{

color: #fff; background-color: #5e5373; box-shadow: 0 5px 0px #3c354a; transition-property: all; transition-duration: 0.5s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.75, -1, 0.21, -1);

}

.button_1,

.button_2,

.button_3:hover{

padding: 0px 50px; background-color: #18b5a4;

}

Или (универсальная запись):

/* все те же стили кнопки и текста */

.button_1{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s;

}

.button_2{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.75, 0.99, 0.21, 0.01) 0s;

}

.button_3{

/* все те же стили конкретной кнопки */ transition: all 0.5s cubic-bezier(0.75, -1, 0.21, -1) 0s;

}

/* все то же событие */

transition — Справочник CSS


Пример

Наведите указатель мыши на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Редактор кода »

Определение и использование

Свойство transition — это сокращенное свойство для:

Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0s, и переход не будет иметь никакого эффекта.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Свойство
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-


CSS Синтаксис

transition: property duration timing-function delay|initial|inherit;

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

Значение Описание
transition-property Задает имя свойства CSS, для которого предназначен эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода
transition-timing-function Задает кривую скорости эффекта перехода
transition-delay Определяет, когда начнется эффект перехода
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

Когда <input type=»text»> получает фокус, постепенно изменится ширина от 100px до 250px:

input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

Редактор кода »

Связанные страницы

CSS Учебник: CSS Переходы

HTML DOM Справочник: Свойство transition


Плавный переход в CSS — transition на примерах

Эффект плавного перехода в CSS часто применяется при наведении курсора на какой-нибудь элемент, например для кнопки. Когда при наведении курсора, кнопка меняет свой цвет, процесс замены происходит очень быстро и резко, то хочется это действие замедлить.

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

Анимация кнопки при наведении

Демонстрация работы анимации кнопки, верхий рисунок: демо

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

<h3>Плавный переход transition CSS. Кнопка</h3>
    <div>
      <a href="#">Заказать работу</a>
    </div>
.button {
    background-color: #2bc6a4;
    border: none;
    border-radius: 15px;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 20%;
    margin: auto;
    font-family: sans-serif;
    font-size: 22px;
    text-decoration: none;
    transition: all 1s ease;
}

.button:hover {
    background-color: #4feac8;
}


Анимация фона при наведении при участии transition

Демонстрация работы анимации кнопки, нижний рисунок: демо

Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.

<h3>Плавный переход transition CSS. Круг</h3>
    <div>
        <span>Иконка</span>
    </div>

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

В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.

.circle{
    background: #3d3d3d;
    width: 198px;
    height: 198px;
    margin: 0 auto;
    line-height: 200px;
    color: #fff;
    font-size: 1.8em;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    text-align: center;
}

Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.

.circle span{
    position: relative;
    z-index: 2;
}

Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом after – это то, что идет после блока. Обязательно прописываем пустую строчку content: » «; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.

Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.

.circle::after{
    content: " ";
    width: 202px;
    height: 202px;
    background: #2bc6a4;
    position: absolute;
    display: block;
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-shadow: 0 0 0 0 #3d3d3d inset;
    transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
}

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

transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;

и исчезнет совсем

width: 0;
height: 0;
font-size: 0;

исчезает красиво, по-центру

top: 100px;
left: 100px;

box-shadow растушёвывает края зеленого круга

.circle:hover::after{
    width: 0;
    height: 0;
    font-size: 0;
    top: 100px;
    left: 100px;
    box-shadow: 0 0 20px 20px #3d3d3d inset;
}

Итоги

На самом деле свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.

Вы можете узнать больше, просмотрев этот видеокурс «Вёрстка сайта с нуля»

  • Создано 25.04.2018 09:55:00
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

переход | CSS-трюки — CSS-трюки

Свойство перехода — это сокращенное свойство, используемое для представления до четырех стандартных свойств, связанных с переходом:

  .элемент {
  переход: фоновый цвет 0,5 с легкость;
}  

Синтаксис

  переход: [свойство перехода] [длительность перехода] [функция времени перехода] [задержка перехода];  

Демо

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

Указание свойств для перехода

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

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

  .элемент {
  переход: все 0,5 с легкости;
  фон: красный;
  отступ: 10 пикселей;
}
.элемент:наведите {
  фон: зеленый;
  отступ: 20 пикселей;
}  

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

  .элемент {
  переход: фон 0.2s легкость,
              заполнение 0,8 с, линейное;
}  

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

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

Указав переход на самом элементе, вы определяете, что переход будет происходить в обоих направлениях. То есть, когда стили изменяются (например, при наведении), их свойства будут переходить, а когда стили меняются обратно (например, при выключенном наведении), они будут переходить. Например, следующие демонстрационные переходы при наведении, но не при наведении:

Поддержка браузера

Desktop
Chrome Firefox IE Edge Safari
4 * 5 * 10 12 5.1 *
Mobile / Tablet

9 100

1 98 3 2.1 * 6.0-6.1 *
Android Chrome Android Hirefox Android iOS Safari

Прочие ресурсы

Родственные свойства

Переходы

Подкаст CSS — 044: Переходы

Аудиоверсия этого модуля

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

По умолчанию CSS мгновенно переключает стиль этих состояний.

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

Ключевой термин

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

Свойства перехода #

Чтобы использовать переходы в CSS, вы можете использовать различные свойства перехода или краткое свойство перехода .

transition-property #

Свойство transition-property указывает, какие стили следует переходить.

  .my-element { 
свойство перехода: цвет фона;
}

Свойство перехода принимает одно или несколько имен свойств CSS в списке, разделенном запятыми.

Дополнительно можно использовать transition-property: all , чтобы указать, что каждое свойство должно переходить.

transition-duration #

Свойство transition-duration используется для определения времени, которое потребуется для завершения перехода.

transition-duration принимает единицы времени либо в секундах ( s ), либо в миллисекундах ( ms ) и по умолчанию 0s .

transition-timing-function #

Используйте свойство transition-timing-function для изменения скорости перехода CSS в течение transition-duration .

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

Наш модуль CSS Animation содержит хороший обзор функций синхронизации.

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

transition-delay #

Используйте свойство transition-delay , чтобы указать время начала перехода. Если transition-duration не указано, переходы будут запускаться мгновенно, поскольку значение по умолчанию равно 0s . Это свойство принимает единицу времени, например, секунды ( s ) или миллисекунды ( мс ).

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

transition-delay также полезен для отладки. Установка для задержки отрицательного значения может начать переход дальше по временной шкале.

сокращение: transition #

Как и большинство свойств CSS, существует сокращенная версия. переход объединяет свойство перехода , длительность перехода , функция времени перехода и задержка перехода .

  .longhand { 
свойство перехода: преобразование;
продолжительность перехода: 300 мс;
функция синхронизации перехода: облегчение входа-выхода;
задержка перехода: 0 с;
}

.сокращение {
переход: преобразование 300 мс облегчение входа-выхода 0;
}

Что можно и что нельзя переходить? #

При написании CSS вы можете указать, какие свойства должны иметь анимированные переходы. См. этот список MDN анимируемых свойств CSS.

Как правило, возможен только переход элементов, которые могут иметь «среднее состояние» между начальным и конечным состояниями. Например, невозможно добавить переходы для font-family , потому что непонятно, как должно выглядеть «среднее состояние» между serif и monospace .С другой стороны, можно добавить переходы для размера шрифта , потому что его единицей является длина, между которой можно интерполировать.

Вот некоторые общие свойства, которые вы можете изменить.

Transform #

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

Ознакомьтесь с разделом о преобразованиях в нашем модуле «Функции».

Цвет #

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

Свойства color , background-color и border-color — это всего лишь несколько мест, где цвет может быть изменен при взаимодействии.Цветовые переходы обычно не должны стоять за ограничением движения. Используйте свое лучшее суждение.

Ознакомьтесь с нашим модулем по цвету.

Тени #

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

Ознакомьтесь с нашим модулем теней.

Фильтры #

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

Ознакомьтесь с нашим модулем по фильтрам.

Триггеры перехода #

Ваш CSS должен включать изменение состояния и событие, которое запускает это изменение состояния для активации переходов CSS. Типичным примером такого триггера является псевдокласс :hover . Этот псевдокласс соответствует, когда пользователь наводит курсор на элемент.

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

  • :hover : соответствует, если курсор находится над элементом.
  • :focus : соответствует, если элемент находится в фокусе.
  • :focus-within : соответствует, если элемент или любой из его потомков находятся в фокусе.
  • :target : соответствует, когда текущий фрагмент URL соответствует идентификатору элемента.
  • :active : соответствует моменту активации элемента (обычно при нажатии на него мышью).
  • класс изменение из JavaScript: когда CSS класса элемента изменяется с помощью JavaScript, CSS перенесет измененные подходящие свойства.

Различные переходы для входа и выхода #

Устанавливая различные свойства перехода при наведении/фокусе, можно создавать интересные эффекты.

  .my-element { 
фон: красный;

/* Этот переход применяется к переходу "выход" */
transition: background 2000ms easy-in;
}

.my-element:hover {
background: blue;

/* Этот переход применяется к переходу "enter" */
transition: background 150ms easy;
}

Вопросы доступности #

CSS-переходы подходят не всем.У некоторых людей переходы и анимация могут вызвать укачивание или дискомфорт. К счастью, в CSS есть мультимедийная функция под названием Preferes-Reduced-Motion , которая определяет, указал ли пользователь предпочтение меньшему количеству движения на своем устройстве.

  /* 
Если пользователь выразил предпочтение уменьшенному
движению, не используйте переходы.
*/
@media (предпочитает уменьшенное движение: уменьшить) {
.my-element {
переход: нет;
}
}

/*
Если браузер понимает медиа-запрос, а пользователь
явно не установил предпочтения, используйте переходы.
*/
@media (предпочитает уменьшенное движение: без предпочтения) {
.my-element {
переход: преобразование 250 мс легкость;
}
}

Ознакомьтесь с нашим сообщением в блоге Preferences-Reduced-Motion: Иногда меньше движения означает больше информации об этой мультимедийной функции.

Вопросы производительности #

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

Ознакомьтесь с нашим руководством по высокопроизводительной CSS-анимации, чтобы глубже погрузиться в эту тему.

Проверьте свои знания о переходах

Какое свойство перехода используется для определения плавности?

длительность перехода переход-замедление переход-кубический-безье функция времени перехода анимация-легкость

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

2 9.0004 9 00004 9Указание

всех может привести к проблемам с производительностью и непреднамеренным переходам.

Правильно. Лучшей практикой является указание каждого свойства по отдельности. Более точный контроль приведет к повышению производительности и более предсказуемым результатам.

Все свойства могут быть преобразованы.

истина ложь

Попробуйте еще раз. Такие свойства, как font-family , не могут быть изменены.

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

Как создать эффекты перехода CSS3

Функция перехода CSS3 позволяет плавно изменять значения свойств CSS в течение заданного времени.

Понимание переходов CSS3

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

В CSS3 представлена ​​новая функция перехода, которая позволяет плавно анимировать свойство от старого значения к новому с течением времени. В следующем примере показано, как анимировать background-color кнопки HTML при наведении курсора мыши.

  кнопка {
    фон: #fd7c2a;
    /* Для Сафари 3.0+ */
    -webkit-transition-свойство: фон;
    -webkit-transition-duration: 2s;
    /* Стандартный синтаксис */
    свойство перехода: фон;
    продолжительность перехода: 2 с;
}
кнопка:наведите {
    фон: #3cc16e;
}  

Необходимо указать по крайней мере два свойства свойство перехода и длительность перехода (больше 0), чтобы переход произошел. Однако все остальные свойства перехода являются необязательными, поскольку их значения по умолчанию не препятствуют выполнению перехода.

Чтобы переход произошел, необходимо указать как минимум две вещи — имя свойства CSS, к которому вы хотите применить эффект перехода с помощью свойства CSS transition-property , и продолжительность эффекта перехода (более 0) с использованием CSS-свойства transition-duration . Однако все остальные свойства перехода являются необязательными, поскольку их значения по умолчанию не препятствуют выполнению перехода.

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


Выполнение нескольких переходов

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

  кнопка {
    фон: #fd7c2a;
    граница: 3 пикселя сплошная #dc5801;
    /* Для Сафари 3.0+ */
    -webkit-transition-property: фон, граница;
    -webkit-transition-duration: 1с, 2с;
    /* Стандартный синтаксис */
    переход-свойство: фон, граница;
    длительность перехода: 1с, 2с;
}
кнопка:наведите {
    фон: #3cc16e;
    цвет границы: #288049;
}  

Сокращенное свойство перехода

Существует множество свойств, которые следует учитывать при применении переходов. Однако также можно указать все свойства перехода в одном свойстве, чтобы сократить код.

Свойство transition является сокращенным свойством для установки всех отдельных свойств перехода (т. е. свойство перехода , длительность перехода , функция времени перехода и задержка перехода ) одновременно в перечисленный порядок.

Важно придерживаться этого порядка значений при использовании этого свойства.

  кнопка {
    фон: #fd7c2a;
    -webkit-transition: фон 2s easy-in 0s; /* Для Сафари 3.0+ */
    переход: фон 2s easy-in 0s; /* Стандартный синтаксис */
}
кнопка:наведите {
    фон: #3cc16e;
}  

Примечание: Если какое-либо значение отсутствует или не указано, вместо него будет использоваться значение по умолчанию для этого свойства. Это означает, что если значение свойства transition-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.


Свойства перехода CSS3

В следующей таблице представлен краткий обзор всех свойств перехода:

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

Слава богу, у нас есть спецификация! — Smashing Magazine

Краткое описание ↬ Эта статья наполнена рядом особенностей и проблем, о которых вам следует знать при работе с переходами CSS3. Обратите внимание, что я не показываю какие-либо обходные пути и не даю советов, как обойти обсуждаемые проблемы.

В этой статье описано несколько особенностей и проблем, о которых следует знать при работе с переходами CSS3.Обратите внимание, что я не показываю какие-либо обходные пути и не даю советов, как обойти обсуждаемые проблемы. Alex MacCaw уже написал очень содержательную и тщательную статью «Все, что вам нужно знать о CSS-переходах».

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

Разделение ответственности не является чем-то новым — мы годами использовали механизмы шаблонов, чтобы добиться именно этого, отделив наш HTML от любого языка сценариев, который мы использовали. . У веб-сайта есть три основных проблемы: структура (HTML), макет и стиль (CSS) и поведение (JavaScript). CSS уже давно перешел черту и стал поведенческим, но это совсем другое обсуждение.

Дальнейшее чтение на SmashingMag:

Больше после прыжка! Продолжить чтение ниже ↓

Пару недель назад мне поручили разработать модуль JavaScript, который позволил бы использовать переходы CSS таким образом, чтобы сторона JavaScript ничего не знала о происходящих переходах. Актуальная проблема - асинхронность переходов. Написав кучу тестов, я отказался от этой задачи. Это невозможно сделать с разумным количеством кода и временем инициализации. О результатах моих тестов и пойдет речь в этой статье.

Прежде чем приступить к работе с переходами, мы должны поговорить о небольшой, часто используемой вспомогательной функции. getComputedStyle() — это метод JavaScript, который возвращает значение свойства CSS в том виде, в каком его интерпретирует браузер. Этот API восходит к «DOM Level 2: getComputedStyle()» и «CSS Level 2: Computed Values», которые в основном указывают, что вычисляемый стиль является абсолютным значением.

Это нормально для таких свойств, как font-size , которые принимают только один аргумент и надежно преобразуются в значения в пикселях. Однако он не описывает, как браузеры должны обрабатывать сокращенные свойства, такие как margin — некоторые браузеры ничего не возвращают, другие что-то полуполезное. Кроме того, есть свойства с разными, но эквивалентными значениями, например, font-weight s bold и 700 . В WebKit также есть ошибка, извлекающая вычисленное значение свойств из псевдоэлементов.

Описанные здесь особенности были обнаружены в январе 2013 г. при использовании Firefox 18 (Gecko), Opera 12.12 (Presto), Internet Explorer 10 (Trident), Safari 6.0.2 (WebKit), Chrome 23 (WebKit), а также Gecko's и ночные каналы сборки WebKit.

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

«С незнанием трудно справиться.Легче предположить».

– д-р Аксель Раушмайер

… Но предположения часто ошибочны. Я обнаружил информацию в этой статье, создав набор тестов CSS3 Transitions.

1. Указание перехода

Помимо сокращенного свойства transition , спецификация перехода CSS3 определяет следующие четыре свойства CSS для указания анимированного изменения состояния: ,

  • задержка перехода ,
  • функция времени перехода .
  • Свойства CSS для перехода

    Свойство transition-property определяет свойство (или свойства) для анимации . Значение по умолчанию — all , что означает, что все свойства, которые браузер может переходить, будут анимироваться при изменении (если transition-duration больше, чем 0s ). Свойство принимает одно значение или список значений, разделенных запятыми (как и все другие свойства перехода -* ).

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

     
    свойство перехода: foobar, padding;
    длительность перехода: 1с, 2с;
      

    Вопреки спецификации, WebKit анализирует приведенное выше свойство transition-property: all . Firefox и Opera разбирают его на transition-property: all, padding .

    Продолжительность перехода

    Свойство transition-duration определяет количество времени перехода, которое должно занять переход из начального состояния в целевое состояние.Он принимает значение в секундах или миллисекундах (например, 2,3 с и 2300 мс задают 2,3 секунды).

    Хотя в спецификации четко указано, что значения должны быть положительными числами, Opera также принимает -5s — по крайней мере, для getComputedStyle() . Opera и Internet Explorer (IE) не принимают значения ниже 10 мс , хотя в спецификации такое ограничение не упоминается. Справедливости ради, вы все равно не заметите переход продолжительностью 9 миллисекунд.WebKit (за исключением текущего WebKit nightly) имеет ошибку в реализации getComputedStyle() , которая возвращает такие значения, как 0.009999999776482582s вместо 0.01s . По крайней мере, все браузеры соглашаются возвращать значения, основанные на секундах.

    Задержка перехода

    Свойство transition-delay определяет время ожидания перед выполнением перехода, также используя значения . Задержка может быть отрицательным значением, что приведет к немедленному запуску перехода и сделает его видимым, как если бы переход начался с заданным смещением во времени — по сути, начиная со скачка.

    Как и в случае transition-duration , IE и Opera не принимают значения между -10 мс и 10 мс . Здесь также проявляются проблемы с плавающей запятой WebKit.

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

    Свойство transition-timing-function определяет математическую функцию , используемую для вычисления значения свойства в момент времени t . Существует три основных типа: cube-bezier(x1, y1, x2, y2) , step(, start|end) и ключевые слова, которые сопоставляются с предопределенными кубическими кривыми Безье.Скорее всего, вы уже знаете ключевые слова linear , easy , easy-in , easy-out и easy-in-out . Математика, стоящая за кубическим Безье, становится смехотворно неважной при использовании очаровательного маленького редактора Кубического Безье Леа Веру. В то время как кубические кривые Безье обеспечивают плавные переходы, функции step() этого не делают. Вместо этого они переходят к следующему значению (то есть к следующему шагу) через регулярные промежутки времени. Это позволяет выполнять покадровую анимацию; см. пример «Анимация набора текста на чистом CSS3 с помощью шагов()».

    Вычисленное значение linear обычно представляется как кубический-безье(0, 0, 1, 1) — за исключением WebKit, который на самом деле возвращает linear . Но не беспокойтесь: WebKit по-прежнему будет возвращать кубических Безье(0,25, 0,1, 0,25, 1) вместо easy . Однако текущий WebKit каждую ночь возвращает ключевое слово для всех определенных ключевых слов. С другой стороны, через пару месяцев WebKit не будет противоречить самому себе — только остальному миру браузеров.

    Спецификация предусматривает, что значения x должны быть между 0 и 1 , а значения y могут превышать этот диапазон. Вопреки спецификации, WebKit позволяет x превышать границы, по крайней мере, в вычислительном отношении. На момент написания статьи браузер Android (версия 4.0) смешивал диапазоны для x и y , по существу запрещая эффекты «отскока».

    2. Когда переход завершен

    Я уже упоминал, что переходы CSS выполняются асинхронно.Спецификация предоставляет событие TransitionEnd , позволяющее JavaScript синхронизироваться с окончанием перехода. К сожалению, спецификация не очень конкретна в отношении этого события. Фактически, в нем просто говорится, что событие должно запускаться для каждого свойства, которое претерпело переход. Если вам нужно одно слово, чтобы описать ситуацию, «кошмар» не за горами.

    Хотя в спецификации сказано, что сокращенные свойства (такие как padding ) должны запускать переходы для всех свойств, которые они охватывают ( padding-top , padding-right и т. д.), в нем не указано, какое свойство должно быть названо в событии TransitionEnd . В то время как Gecko, Trident и Presto договариваются о запуске событий для сокращенных подсвойств (например, padding-top ), даже если переход был определен для сокращенного свойства (например, padding ), WebKit воспользуется возможностью. испортить дело. WebKit вызовет событие для padding , если (и только если) вы укажете transition-property: padding , но transition-property: all вызовет событие для padding-left et al.По какой-то причине браузер Safari на iPhone 6.0.1 может также запускать события для font-size и line-height при переходе padding . Еще не запутались?

     
    .пример {
      отступ: 1px;
      свойство перехода: заполнение;
      продолжительность перехода: 1 с;
    }
    
    .пример:наведите {
      отступ: 10 пикселей;
    }
      

    Вышеуказанные CSS будут вызывать разные переходные данные События по браузерам:

    геккона, Trident, Presto
    PADDING-TOP , PADDING-PROW , PADDING-BOST
    WebKit
    заполнение
     
    .пример {
      отступ: 1px;
      свойство перехода: все, заполнение;
      продолжительность перехода: 1 с;
    }
    
    .пример:наведите {
      отступ: 10 пикселей;
    }
      

    CSS выше будет вызвать разные Transisionend События по браузерам:

    геккона, Трец, Presto, WebKit
    PADDING-TOP , PADDING-TOP , PADDING-BOST
    Safari 6.0.1 на iPhone (не iPad, заметьте!)
    padding-top , padding-right , padding-bottom , padding-left , 3009030 font-size , 30 line-height
    Я сказал, что вы можете указать отрицательное значение transition-delay , чтобы «запустить» ваш переход.Но что происходит для transition-duration: 1s; задержка перехода: -1с; ? Gecko и WebKit немедленно переходят к целевому значению и запускают событие. Trident и Presto не вызывают никаких событий.

    Проблема с плавающей запятой, с которой сталкивается WebKit в getComputedStyle() , также присутствует в TransitionEnd.elapsedTime — последовательно во всех браузерах. Math.round(event.elapsedTime * 1000) / 1000 «исправит» это для вас.

    WebKit и IE внедрили неопределенное расширение для background-position , которое заставляет их запускать события TransitionEnd для background-position-x и background-position-y вместо background-position .

    Итак, даже если бы вы знали , что происходит переход, вы не смогли бы полагаться на полученное вами TransitionEnd.propertyName . Хотя вы могли бы написать множество JavaScript для выравнивания поведения, вы не смогли бы сделать это с расчетом на будущее, не выполняя надлежащее определение функций для каждого отдельного свойства. И это может включать в себя свойства, о которых вы даже не подозревали, что их можно анимировать.

    3. Свойства перехода

    Спецификация перечисляет ряд свойств CSS, для которых браузер должен поддерживать анимированный переход.Этот список содержит свойства CSS2.1. Любое из новых свойств будет помечено как анимируемое в соответствующих спецификациях — как показывает порядок гибкого макета блока.

    Тип значения свойства является важным фактором. Свойство margin-top принимает значения и , но согласно списку переходных свойств CSS только должно быть анимировано. Но это все равно не помешало производителям браузеров реализовать переходы для значений .Однако свойство word-spacing — это совсем другая история. Спецификация включает значений, но на момент написания ни один браузер не мог их анимировать.

    Игнорируя (по своей сути ненадежные) события TransitionEnd , свойство переходит от значения A к значению B, если его значение getComputedStyle() отличается от A и B в заданное время во время перехода. Поскольку не существует такой вещи, как событие «изменение значения свойства CSS», вам остается опрос DOM . setTimeout() Разрешение недостаточно для быстрых переходов (длительностью менее нескольких сотен миллисекунд). requestAnimationFrame() — ваш друг для этого. Браузер свяжется с вами перед перерисовкой на экране, что позволит вам получить пару промежуточных значений во время переходов. За исключением Opera, все движки уже имеют эту функцию.

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

    4. Приоритет свойств перехода

    В спецификации свойства transition-property указано, что нам разрешено определять свойство несколько раз:

    «Если свойство указано несколько раз в значении ‘transition- свойство» (само по себе, с помощью сокращения, которое его содержит, или с помощью значения «все»), то переход, который начинается, использует функцию длительности, задержки и времени по индексу, соответствующему последнему элементу в значении «свойство перехода», которое требует анимации этого свойства.”

    Итак, мы можем сделать переход padding за 1 секунду, в то время как переход padding-left займет 2 секунды; или определить стиль перехода по умолчанию, используя свойство перехода : все , и перезаписать его для определенных свойств.

    В Firefox и IE это работает нормально. Однако Opera меняет порядок приоритетов. Вместо того, чтобы просто использовать последнее применимое свойство в списке, он обрабатывает padding-left как более конкретное, чем padding и all .

    Настоящая проблема — WebKit. Каким-то образом удалось выполнить переход несколько раз, если свойство указано несколько раз. Чтобы действительно напугать WebKit, попробуйте запустить переход для transition-property: padding, padding-left с очень маленькой длительностью перехода : 0,1 с (предупреждение: это не очень хорошая идея для эпилептиков). WebKit отобразит переход как минимум дважды. Но настоящая красота — это TransitionEnd событий, из которых можно было получить до сотен за один переход.

    5. Переход от и к

    auto

    Значение свойства CSS auto переводится как «Уважаемый браузер, пожалуйста, рассчитайте какое-нибудь разумное значение для этого». Абзацы (

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

    Firefox, IE и Opera не могут перейти от или к значениям auto . IE делает небольшое исключение для z-index , но это все. WebKit, с другой стороны, способен переходить практически от любого свойства CSS, которое принимает значение auto . WebKit не слишком любит клип ; для этого свойства он вызовет только событие TransitionEnd , не создавая и не отображая никаких промежуточных значений или состояний во время перехода.

    Для других свойств, таких как ширина и высота поведение WebKit не совсем то, что вы ожидаете. Если width: auto переведено в рассчитанную ширину 300px и вы перешли на 100px , тогда ваш переход не уменьшится с 300 до 100 пикселей. Вместо этого он будет расти с 0 до 100 пикселей.

    Полную таблицу совместимости см. в разделе «Анимируемые свойства CSS».

    6. Неявные переходы

    «Неявный переход» происходит, когда изменение одного свойства вызывает переход другого свойства — или если вы изменяете свойство родительского элемента и заставляете дочерний переходить либо унаследованное свойство, либо зависимое свойство.Смущенный? Рассмотрим размер шрифта : 18px; набивка: 2эм; — отступ вычисляется как 2 × размер шрифта , потому что это то, что делает em, что дает нам 36 пикселей.

    Существует различные Типы относительной ценности : <Процент> , <Длина> , EM , REM , VH , VW и т. Д. Использование относительного значения, такое как прокладки : 2em , заставляет браузер пересчитывать свойство getComputedValue() каждый раз, когда изменяется его зависимое значение (например, font-size ).Это, в свою очередь, вызывает переход для заполнения , потому что вычисляемый стиль изменился. Этот переход считается «неявным», поскольку свойство padding не было изменено явно.

    Большинство браузеров выполняют эти неявные переходы. Исключением является IE 10, который запускает их только для свойства line-height . WebKit запускает неявные переходы для всех применимых свойств, кроме vertical-align . Помимо значений свойств, относящихся к шрифту, существуют значения свойств, относящиеся к ширине (обычно ), значения свойств, относящиеся к области просмотра (например, vh и vw ), начальные значения по умолчанию (например, column-gap). : 1em в Opera), а затем currentColor .Все они могут — а могут и не вызывать — неявные переходы.

    В Firefox эти неявные переходы становятся особенно интересными, когда и зависимые, и зависимые свойства переходят, но их transition-duration или transition-delay не совпадают. В то время как WebKit и Opera производят переходы, которые имеют визуальный смысл, Firefox немного искажает ситуацию. В IE это не проблема, потому что он не выполняет неявные переходы.

    Не забывайте о наследовании внутри каскада.Размер шрифта и размер элемента DOM будут унаследованы его дочерними элементами, если они не перезаписаны, что может привести к неявным переходам.

    id=»a7″>7. Переходы и псевдоэлементы

    Псевдоэлементы ( :до и :после ) были введены с содержимым, сгенерированным CSS2. Прочтите «Учимся использовать псевдоэлементы :before и :after в CSS», если вы еще не знакомы с генерируемым контентом. Хотя содержимое CSS3 определяет дополнительные псевдоэлементы ( ::alternate , ::outside ), они (пока) не поддерживаются.Все анимируемые свойства CSS также должны быть анимируемыми для псевдоэлементов.

    Firefox и IE 10 будут изменять свойства псевдоэлементов. Опера, Хром и Сафари не будут. Поддержка WebKit была добавлена ​​в январе 2013 года, и вы уже можете проверить ее в WebKit nightly и Chrome Canary.

    Переходы сгенерированного контента приносят свой собственный набор причудливых проблем. События TransitionEnd вообще не запускаются. В какой-то момент в будущем они должны сработать на элементе владельца и предоставить свой псевдоэлемент через TransitionEnd.псевдоЭлемент . Но даже в разделе «События перехода» проекта редактора «Переходы CSS» это еще не указано должным образом.

    Было время, когда мы изменяли значение свойства content , чтобы IE 8 повторно отображал этот элемент при определенных обстоятельствах (например, при входе в состояние :hover ). Оказывается, это исправление для старого IE мешает этой возможности для всех других браузеров. Итак, при попытке передать свойство псевдоэлементу убедитесь, что содержимое не изменилось.

    IE 10 не будет запускать переход для состояния :hover псевдоэлемента, если элемент-владелец также не имеет состояния :hover :

     
    .some-селектор: до {
      содержание: "привет";
      красный цвет;
      переход: все 1 линейные 0;
    }
    
    .some-selector:hover:before {
      цвет: зеленый;
    }
    /* Это следующее правило необходимо для перехода IE 10 :before при наведении */
    .some-селектор: наведите {}
      

    Самое странное в этой проблеме не то, что вам нужно (возможно, пустое) состояние :hover для элемента owner.Дело в том, что если у вас его нет, IE 10 интерпретирует :hover как :active (т.е. активен, когда вы наводите указатель мыши на элемент). Еще более странным является то, что состояние :active сохраняется даже после mouseup и удаляется только еще одним щелчком мыши по документу.

    8. Фоновые вкладки

    На момент написания IE 10 был единственным браузером, который реагирует на вкладку, находящуюся в фоновом или переднем плане. Хотя он завершит текущий переход, если вкладка переместится на задний план, он не начнет там никаких новых переходов.IE 10 будет ждать, пока вкладка не будет переведена на передний план, прежде чем начинать какие-либо новые переходы. К счастью, IE 10 уже поддерживает Page Visibility API, что позволяет разработчикам реагировать на такое поведение.

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

    9. «Невидимые» элементы

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

    10. Переход до того, как DOM будет готов?

    Событие DOMContentLoaded запускается, когда документ выходит из режима синтаксического анализа. Если вы увлекаетесь jQuery, мы сейчас говорим о jQuery.ready() . Переходы могут выполняться 90 129 до того, как 90 130 произойдет это событие.

    11. Особенности рендеринга

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

    В настоящее время переход фона с градиента на градиент невозможен. Переход от градиента к сплошному цвету возможен — с большой оговоркой. Если используется градиент, то произойдет переход цвета от белого к целевому цвету, который в начале перехода быстро мигает белым.Это можно наблюдать во всех современных браузерах.

    Похоже, что Firefox использует другой алгоритм для рендеринга (или сглаживания) изображений во время их анимации (см. пример). Судя по всему, Gecko во время анимации жертвует качеством ради производительности. Обратите внимание, что это происходит, если используется достаточно низкое преобразование : scale() .

    Firefox не будет должным образом анимировать от a:visited до a:hover или наоборот. Вместо этого он перейдет с a:visited на a:link , а затем перейдет на a:hover , как вы можете видеть в этом примере.Об этом упоминается в разделе «Конфиденциальность и селектор :visited» в Mozilla Developer Network. Хотя IE 10 соглашается с Chrome, Safari и Opera в отношении правильного перехода, он также выполняет переход с a:link на a:visited при загрузке страницы.

    Переход нескольких свойств не синхронизируется в Firefox и Webkit. В этом примере вы можете увидеть, как уменьшение границы на ту же величину, на которую увеличивается отступ (и наоборот), приводит к тому, что следующий контент немного дрожит.IE 10 и Opera понимают это правильно.

    Как видите, Firefox не будет анимировать свойства элемента, если одна из его родительских позиций изменена. Webkit, Opera и IE 10 ведут себя корректно.

    12. Рекомендации для спецификации

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

  • Ввести событие TransitionStart , инициируемое для каждого свойства, подлежащего переходу. Поскольку события DOM обходятся недешево, а цикл событий JavaScript и поток рендеринга не обязательно блокируют друг друга, лучшим решением может быть одно событие TransitionsStart (снова множественное число).Я не понимаю, почему я должен иметь возможность отменить событие, так что это будет что-то вроде «выстрелил и забыл».
  • Уточните, для чего должен срабатывать TransitionEnd . Эта проблема padding и padding-left в WebKit довольно раздражает.
  • Четко укажите, как должны обрабатываться «неявные переходы», такие как line-height: 1em for transition-property: font-size .
  • Добавьте псевдокласс ::transitioning , который позволяет вам определять события указателя: нет для предотвращения случайных состояний наведения (среди прочего).Хитрость заключается в том, чтобы предотвратить применение стилей, которые сами по себе вызовут новый переход или изменят уже запущенный переход.
  • В дополнение к этим предложениям, мы должны быть в состоянии выполнить ряд обычных (простых) вещей, не прибегая к большому количеству JavaScript для решения проблемы:

    • Время от времени вы захотите полностью отключить все переходы — например, потому что вы меняете макет и вам нужно рассчитать размеры и позиции, прежде чем показывать посетителю ваши красивые переходы.
    • Иногда вам может понадобиться удалить объект из DOM и анимировать его. Прямо сейчас вы бы добавили класс, дождались события TransitionEnd и затем удалили элемент.
    • Так же, как и при удалении вещей, вы захотите добавить новый элемент и анимировать его внешний вид. Прямо сейчас вам нужно вставить элемент, установить некий «невидимый стиль», принудительно перерисовать, а затем вернуться к фактическому стилю нового элемента.
    • Переупорядочивание, скрытие и отображение элементов являются общими для любого веб-приложения.Придание этой задаче небольшого стиля в настоящее время требует от нас запуска таких утилит, как Isotope. Ванильное CSS-решение может сбрить несколько байтов.

    13. Используйте задержку

    , Люк!

    Представьте себе несколько элементов, плотно упакованных вместе. Представьте, что стили этих элементов меняются при наведении. Представьте, что вы перемещаете курсор (умеренно быстро) по этой группе. Что просходит? Точно: вы увидите, как стили этих элементов мигают.

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

    14. Заключение

    • Будьте очень осторожны при использовании свойства перехода : все . Вы получите события TransitionEnd для свойств, которые вы не ожидали когда-либо переходить.
    • Будьте осторожны при использовании сокращенных свойств, поскольку количество инициируемых событий зависит от браузера.
    • Opera и IE не запускают события, когда отрицательная задержка отменяет продолжительность.
    • WebKit имеет реальные проблемы с приоритетом свойств, таких как transition-property: margin, margin-left . Избегайте этого пока.
    • IE не поддерживает неявные переходы — например, срабатывает для заполнения : 2em при изменении размера шрифта .
    • Firefox и Opera не могут проанализировать свойство перехода: все, ширина .
    • Opera путает приоритет свойств.
    • Переходы на псевдоэлементах не вызывают события TransitionEnd .
    • IE 10 имеет странную ошибку :hover при переходе между псевдоэлементами.
    • Спецификация оставляет много возможностей для улучшения.

    Связанный контент

    Если вас интересуют переходы и анимация — и их разумное использование — взгляните на эти фантастические ресурсы:

    Спасибо Оли Стадхольм и Леа Веру за то, что нашли время, чтобы просмотреть это статье и Питеру Линссу за то, что провел меня по тестовой инфраструктуре Рабочей группы CSS.Изображение на главной странице предоставлено: «Переходные интерфейсы», Паскуале Д'Сильва

    (al)

    Узнайте, как добавить переходы CSS на свою веб-страницу

    Если вы работаете с такими веб-технологиями, как CSS, HTML и JavaScript, полезно иметь базовые знания о переходах CSS. Это самый простой способ анимировать ваши компоненты. В этом уроке вы узнаете, как добавить базовую анимацию перехода с помощью CSS.

    CSS-переход

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

    Полный курс веб-разработчика стека
    Чтобы стать экспертом в MEAN StackView Course

    Эффект перехода возникает, когда пользователь наводит курсор на элемент.

    Синтаксис:

    свойство перехода: нет|все|свойство|начальное|наследовать;

    В процессе перехода находятся четыре свойства:

    1. свойство перехода: указывает свойства CSS, для которых должен применяться эффект перехода.
    2. transition-delay: указывает время задержки начала перехода.
    3. transition-duration: указывает время, которое должно пройти для завершения эффекта перехода.
    4. функция времени перехода: определяет скорость перехода.

    Пример перехода CSS 1

    Здесь при наведении курсора на элемент ширина меняется со 100px на 500px.

    1 с (секунды) — это продолжительность, в течение которой будет происходить переход.

    БЕСПЛАТНОЕ сертификационное обучение Java
    Изучайте Java от А до Я так, как никогда раньше

    Пример перехода CSS 2

    Свойство преобразования в CSS позволяет поворачивать, масштабировать, наклонять или перемещать элемент. В этом примере элемент будет поворачиваться на 160 градусов при наведении курсора.

    Поддержка браузера

    Браузер

    Хром

    Фаерфокс

    Сафари

    Опера

    Версия

    26.0

    16,0

    6.1

    12.1

    Получите навыки работы с HTML5 и CSS3 с помощью магистерской программы Full Stack Java Developer. Нажмите, чтобы узнать подробности программы!

    Заключение

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

    Если вы хотите расширить свое обучение и получить более полное и прикладное представление о разработке полного стека, вам следует ознакомиться с программой для аспирантов Simplilearn по курсу веб-разработки полного стека в сотрудничестве с Caltech CTME.В этом курсе вы овладеете навыками, необходимыми для того, чтобы стать полноценным технологом.

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

    Приятного обучения!

    Основное различие между CSS-анимацией и переходами

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

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

    В этом посте мы собираемся определить переходы и анимации и объяснить их различия.

    Переход CSS и анимация

    CSS-переходы и анимация во многом похожи, но отличаются сложностью переходов, взаимодействием кода CSS с JavaScript, работой циклов и методологией запуска анимации.CSS-переходы, как правило, лучше всего подходят для простых движений «из-в», а CSS-анимации — для более сложных последовательностей движений.

    Легко спутать CSS-переходы и анимацию, потому что они позволяют делать похожие вещи. Вот лишь несколько примеров:

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

    Несмотря на сходство, переходы и анимация разные, и у обоих есть свои преимущества и недостатки. Вот краткий обзор их различий:

    CSS-переходы CSS-анимации
    • Можно переходить только из начального состояния в конечное — без промежуточных шагов
    • Может запускаться только один раз
    • Для запуска требуется триггер (например, наведение мыши)
    • Движение вперед при срабатывании и назад при снятии пускового устройства
    • Легче использовать JavaScript
    • Лучше всего подходит для создания простого перехода из одного состояния в другое
    • Может переходить от начального состояния к конечному с промежуточными шагами между ними
    • Может выполнять бесконечный цикл благодаря свойству animation-iteration-count
    • Может запускаться, но может запускаться и автоматически
    • Может двигаться вперед, назад или в разных направлениях
    • Сложнее использовать с JavaScript
    • Лучше всего подходит для создания сложных серий движений

    Вот простой способ визуализировать основные различия между переходами CSS и анимацией:

    Прежде чем вы решите, что подходит для вашего сайта, вам нужно лучше понять, как переход или анимация будут работать на вашем сайте.Давайте посмотрим поближе.

    CSS-переходы

    Если вы просто хотите выполнить простое действие на своем сайте, переход — это самый простой способ. Переходы связаны с инициирующим действием — чаще всего, когда указатель мыши находится над элементом. В этом случае псевдокласс :hover используется для изменения значения свойства CSS, заставляя элемент реагировать так, как нужно.

    Вы можете настроить элемент на изменение его цвета , масштаба или положения .Вы также можете повернуть , наклонить и перевести объектов. Если вы хотите немного более сложный переход, можно даже воздействовать на несколько свойств одновременно. Например, если вы хотите, чтобы ваш переход изменил цвет и ширину фона, вы указываете записи для свойств background-color и width .

    Свойства перехода CSS

    Чтобы создать переход, вы можете использовать сокращенное свойство перехода или комбинацию подсвойств ниже.

    • свойство перехода : указывает имя свойства CSS, для которого предназначен эффект перехода. Так, например, если для этого свойства установлено значение «ширина», то эффект перехода будет иметь место, когда пользователь наводит курсор на элемент, и его ширина начинает изменяться.
    • transition-duration : указывает продолжительность времени, которое требуется для завершения эффекта перехода.
    • функция времени перехода : устанавливает темп эффекта перехода.
    • transition-delay : указывает, когда начинается эффект перехода.

    Переходы CSS и JavaScript

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

    Переход, вероятно, идеален, если вы решите управлять более сложными аспектами с помощью JavaScript.

    Примеры перехода CSS

    Переходы могут быть полезны, но они более просты, чем анимация CSS. Давайте рассмотрим несколько примеров.

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

    Растягивание при наведении Пример

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

    Пример счетчика пробела

    В приведенном ниже примере количество нажатий пользователем пробела "записывается" благодаря сочетанию CSS и JavaScript. Число вернется к 0, когда пользователь нажмет кнопку «Перезагрузить».

    Источник изображения

    Пример кнопки

    При наведении курсора на элемент ниже стрелка становится прямоугольником, поэтому текст "Поехали!" похоже на кнопку.

    Источник изображения

    Переход CSS не работает

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

    1. Свойство перехода не задано.

    Как указано выше, свойство transition-property указывает имя свойства CSS, к которому применяется переход. Это свойство может быть определено ключевым словом «все», которое указывает, что все свойства должны быть преобразованы, или списком свойств, которые должны быть преобразованы. Однако, если для свойства установлено значение «none», то никакое свойство не будет передано.

    2. Длительность перехода не определена, либо установлена ​​на ноль или отрицательное значение.

    Как сказано выше, свойство transition-duration указывает продолжительность перехода. Может быть установлено любое положительное значение. Если свойство не определено, то значение будет считаться нулем секунд. Элемент по-прежнему будет переходить из одного состояния в другое, но изменение будет мгновенным — никакой анимации не произойдет.

    Отрицательное значение делает объявление недействительным, поэтому предполагается, что свойство не определено.

    Чтобы понять, как это будет выглядеть, сравните два эффекта перехода ниже.

    См. «Перо» Кристины Перриконе (@hubspot) на CodePen.

    Когда использовать переход и анимацию

    Давайте вспомним идеальные варианты использования переходов вместо анимации:

    • Создание простых движений из-в
    • Эффект возникает только тогда, когда пользователь взаимодействует с элементом, наведя на него курсор или щелкнув по нему
    • Использование JavaScript
    • Разработка кнопок для изменения цвета или размера при наведении на них курсора

    Анимация CSS

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

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

    Благодаря этим возможностям вы можете создавать анимацию HTML5, которая может конкурировать с анимацией, созданной с помощью передовых инструментов, таких как Flash.

    Анимации

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

    Свойства анимации CSS

    Чтобы создать переход, вы можете использовать сокращенное свойство анимации или комбинацию нижеприведенных подсвойств.

    Требуются только свойства animation-name и animation-duration. Если другие свойства не указаны, для них будут установлены значения по умолчанию.

    • имя-анимации : указывает тип анимации, обязательны.
    • animation-duration : указывает продолжительность последовательности анимации.
    • функция синхронизации анимации : устанавливает темп анимации.
    • анимация-задержка : указывает, когда начинается анимация.Можно использовать миллисекунды или секунды, а также положительные или отрицательные значения.
    • animation-direction : определяет направление анимации.
    • animation-fill-mode : указывает, применяются ли стили анимации до или после воспроизведения анимации.
    • animation-iteration-count : указывает, сколько раз будет воспроизводиться анимация.
    • animation-play-state : используется для приостановки и возобновления последовательности анимации.

    Цикл анимации CSS

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

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

    Пример анимации CSS

    Ниже приведен пример анимации CSS. Есть несколько состояний, через которые проходит графика, и она зацикливается. Пар сжимается в размерах, поднимается вверх и исчезает. Это изображение гораздо более динамично, чем переход CSS.

    Когда использовать анимацию и переход

    Давайте вспомним идеальные варианты использования анимации вместо переходов:

    • Создание более сложных серий движений
    • Эффект вступает в силу сразу после загрузки страницы
    • Только с использованием CSS (без JavaScript)
    • Разработка наложений инструкций для пользовательского интерфейса

    Выбор между переходами и анимацией

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

    Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и обновлен для полноты информации.

    Полное руководство по анимации, преобразованиям и переходам CSS3

    # Самый полный курс CSS-анимации в Udemy!

    # Лабораторные сессии и реальные проекты реальной жизни

    # Английский подписи (не автосгенерированные)

    # Все ресурсы и образцы кода могут быть загружены

    # Опытный и ответственный адаптивный автор

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

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

    Каждая тема поддерживается исчерпывающими примерами CSS3 Transition, Transition и Keyframe Animation , проектов , а также лабораторных занятий , добавленных для поддержки и укрепления кривой обучения.

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

    Основные темы курса:

    • Что такое CSS-преобразования и как их использовать

    • Понимание двухмерных преобразований: )

    • Принесение жизни на страницу с Переходы

    • Простые и передовые переходные эффекты

    • Что вы можете и не можете перейти и анимировать

    • Понимание Синтеграда CSS-переходные свойства

    • CSS Transition Timing Timing функций

    • Как анимировать с CSS с помощью ключевых кадров

    • анимационные свойства и синтаксические детали

    • Понимание 3D трансформаций: TRADEST3D (), scale3d(), rotate3d() и skew3d()

    • Перспектива 9013 7

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

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

    Ваш адрес email не будет опубликован.