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

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 ⚡️ HTML и CSS с примерами кода

Универсальное свойство transition, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

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

Демо

• @keyframes

• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

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

Синтаксис

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

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.  5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Значения

none

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

Примечание

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

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

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

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

• CSS Transitions

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

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

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

 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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition</title>
    <style>
      #bar {
        top: -5. 5em;
        right: 5em; /* Положение */
        padding: 0.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>↓</li>
    </ul>
  </body>
</html>

[Исправлено] CSS-переходы не работают и примеры

Обновление Chrome OS сломало ваш Chromeb…

Пожалуйста, включите JavaScript

Действия по устранению проблем с неработающим переходом CSS :

1. Проверьте правильность синтаксиса свойства перехода CSS. Убедитесь, что свойство перехода находится в самом элементе, а не в состоянии триггера элемента (например, :hover или :focus ).
2. Переход можно применить только к анимируемым свойствам.
3. Убедитесь, что для свойства анимации не установлено значение auto . Переходы не могут анимировать свойства CSS, которые не заданы явно и авто .
4. Убедитесь, что свойство перехода поддерживается браузером пользователя

Убедитесь, что синтаксис вашего свойства перехода CSS верен

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

Позволяет определить три параметра:

• свойство CSS для анимации
• Как долго должна длиться анимация
• Как должна выполняться анимация — с использованием функций синхронизации (например, линейная, ускорение, ускорение)

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

 div {
  переход: <свойство> <длительность> <функция синхронизации> <задержка>;
}
/* свойство — свойство CSS, которое мы хотим анимировать. Мы можем использовать ключевое слово all, чтобы сказать, что мы разрешаем анимацию всем */
/* продолжительность - количество секунд, в течение которых должна длиться анимация */
/* функция синхронизации - функция синхронизации для использования анимации (например, линейная, плавная, плавная) */
/* задержка - количество секунд для задержки анимации */ 

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

• transition-property — будут анимированы только перечисленные здесь свойства CSS. Ключевое слово all может использоваться, чтобы сообщить браузеру, что все свойства CSS можно анимировать, если изменить.
• transition-duration - продолжительность анимации в секундах (с) или миллисекундах.
• функция времени перехода - функция синхронизации того, как будет работать анимация. Например, linear будет работать постоянно. easy-in будет работать анимация быстрая в начале и медленная в конце.
• transition-delay - задержка в секундах (s) или миллисекундах (mms)

 #delay {
  размер шрифта: 14px;
  свойство перехода: размер шрифта;
  продолжительность перехода: 4 с;
  задержка перехода: 2 с;
}
# задержка: наведите {
  размер шрифта: 36 пикселей;
} 

Совет: лучше не использовать transition-property:all

Переход можно применить только к

 .btn{
  высота: 100 пикселей;
  переход: все единицы;
  цвет фона: розовый;
  ширина:100%;
}
.кнопка:наведите{
    высота: авто; /* ❌ Не работает */
} 

 .btn{
  высота: 100 пикселей;
  переход: все единицы;
  цвет фона: розовый;
  ширина:100%;
}
.кнопка:наведите{
    высота: 200 пикселей; /* ✔️ Изменить высоту на явную */
} 

 -webkit-transition: все 500 мс;
   -moz-переход: все 500мс;
     -о-переход: все 500мс;
        переход: все 500 мс;