Transition all: transition — CSS | MDN

19.04.2021 alexxlab

Содержание

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

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

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

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

Синтаксис

/* 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

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

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

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</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 transition

Пример

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

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

div:hover {
width: 300px;
}

Подробнее примеры ниже.

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

Свойство transition является сокращенным свойством для четырех свойств перехода:

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

Значение по умолчанию:	all 0s ease 0s
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.transition=»all 2s»

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

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

Номера следуют -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-

Синтаксис CSS

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

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

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

Другие примеры

Пример

Когда < входной тип = «Text» > получает фокус, постепенно измените ширину с 100px на 250пкс:

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

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

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{

}

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

.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{

}

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

.button_1{

}

.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{

}

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

.button_1{

}

.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{

}

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

.button_1{

}

.button_1:hover{

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

}

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

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

.button_1{

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

}

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

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

CSS код:

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

.button{

}

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

.button_1{

}

.button_2{

}

.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{

}

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

.button_1{

}

.button_2{

}

.button_3{

}

.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 | schoolsw3.com

Обновляется!!! Справочник JavaScript

Пример

Наведите указатель мыши на элемент <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

transition — CSS: Cascading Style Sheets

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

 

переход: маржа-право 4с;


переход: margin-right 4s 1s;


переход: маржа-право 4s легкость входа-выхода;


переход: маржа-вправо 4 с легкость входа-выхода 1 с;


переход: край-правый 4s, цвет 1s;


переход: все 0,5 с ослабление;


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

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

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

ноль или одно значение, представляющее свойство, к которому должен применяться переход. Это может быть любое из:
- ключевое слово нет
- ключевое слово все
- a именование свойства CSS.
ноль или один значение, представляющее функцию ослабления для использования
ноль, один или два <время> значений.Первое значение, которое может быть проанализировано как время, назначается для длительности перехода , а второе значение, которое может быть проанализировано как время, присваивается transition-delay .

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

Простой пример

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

HTML

   Наведите курсор на меня

CSS

  .target {
  размер шрифта: 14 пикселей;
  переход: font-size 4s 1s;
}

.target: hover {
  размер шрифта: 36 пикселей;
}

Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.

Таблицы BCD загружаются только в браузере

свойство перехода — CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

Если вы укажете сокращенное свойство (например,g., background ), все его длинные подсвойства, которые можно анимировать, будут.

 
свойство-переход: нет;
свойство-переход: все;


свойство-переход: test_05;
свойство перехода: специфическое;
свойство перехода: вертикальное скольжение;


свойство-перехода: test1, animation4;
свойство-переход: все, высота, цвет;
свойство-переход: все, -моз-зависимые, скользящие;


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

Значения

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

Простой пример

В этом примере выполняется четырехсекундный переход размера шрифта, когда пользователь наводит курсор на элемент, свойство перехода равно font-size .

HTML

   Наведите курсор на меня

CSS

 .цель {
  размер шрифта: 14 пикселей;
  свойство перехода: размер шрифта;
  продолжительность перехода: 4 с;
}

.target: hover {
  размер шрифта: 36 пикселей;
}

Вы найдете больше примеров свойства transition-property , включенных в основную статью о переходах CSS.

Таблицы BCD загружаются только в браузере

Псевдоэлементы — CSS: каскадные таблицы стилей

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

 
p :: first-line {
  цвет синий;
  преобразование текста: прописные буквы;
}

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

  selector :: псевдоэлемент {
  стоимость имущества;
}

В селекторе можно использовать только один псевдоэлемент.Он должен стоять после простых селекторов в операторе.

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

Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:

А B C F грамм

:: grammar-error Это экспериментальный API, который не следует использовать в производственном коде.

млн

:: marker Это экспериментальный API, который не следует использовать в производственном коде.

:: part () Это экспериментальный API, который не следует использовать в производственном коде.
:: placeholder Это экспериментальный API, который не следует использовать в производственном коде.

S Т

:: target-text Это экспериментальный API, который не следует использовать в производственном коде.

Спецификация	Статус	Комментарий
CSS Уровень 1	Рекомендация	Определенные псевдоклассы и псевдоэлементы.

Браузер	Самая низкая версия	Опора
Internet Explorer	8,0	`: псевдоэлемент`
Internet Explorer	9.0	`: псевдоэлемент :: псевдоэлемент`
Firefox (Gecko)	1,0 (1,0)	`: псевдоэлемент`
Firefox (Gecko)	1,0 (1,5)	`: псевдоэлемент :: псевдоэлемент`
Opera	4,0	`: псевдоэлемент`
Opera	7,0	`: псевдоэлемент :: псевдоэлемент`
Safari (WebKit)	1.0 (85)	`: псевдоэлемент :: псевдоэлемент`

Не забудьте о переходе: все

Обычно при написании кода перехода CSS3 вы увидите что-то вроде этого (префиксы поставщиков для краткости опущены):

.element {
  ширина: 400 пикселей;
  высота: 400 пикселей;
  переход: ширина 1с легкость вхождения;
}

.element: hover {
  ширина: 500 пикселей;
}

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

Если же мы хотим анимировать и ширину, и высоту, у нас есть возможность сделать это:

.element {
  ширина: 400 пикселей;
  высота: 400 пикселей;
  переход: ширина 1s прилегания, высота 1s прилегания;
}

.element: hover {
  ширина: 500 пикселей;
  высота: 500 пикселей;
}

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

Вместо этого вы можете сделать это:

.element {
  ширина: 400 пикселей;
  высота: 400 пикселей;
  переход: легкость включения всех единиц;
}

.element: hover {
  ширина: 500 пикселей;
  высота: 500 пикселей;
}

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

.element {
  ширина: 400 пикселей;
  высота: 400 пикселей;
  переход: легкость в 1 с;
}

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

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

Чем это полезно?

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

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

Заключение

Если вы много использовали переходы CSS3, то, вероятно, уже знали о ключевом слове «все». На самом деле я уже какое-то время использую переходы и совсем забыл об этом до недавнего времени.

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

Обновление (28 ноября 2011 г.) : Как указал Ханс Кристиан Рейнл, при использовании перехода возможно снижение производительности: все . Я не видел официальной документации, подтверждающей это, но этот твит Симурая предполагает такую возможность. Я обновлю этот пост, если что-нибудь убедительное будет найдено.

переходов CSS | CSS-переходы, CSS-преобразования и CSS-анимация

Браузер Поддержка переходов CSS

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

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

В элементе, который нужно анимировать, добавьте следующий CSS:

#id_of_element {
  -webkit-transition: простота установки всех единиц;
  -moz-transition: легкость включения-выключения всех единиц;
  -o-transition: легкость включения-выключения всех единиц;
  переход: легкость включения-выключения всех единиц;
}

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

Другой подход — просто написать CSS без префиксов, а затем использовать -prefix-free Lea Verou, чтобы добавить их во время выполнения.

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

Также стоит отметить, что в этих свойствах нет префикса -ms- . IE10 был первым браузером без префикса.Однако в бета-версиях IE10 префикс использовался, поэтому вы можете увидеть код с использованием -ms- . Но в этом нет необходимости.

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

Каждый раз, когда изменяется какое-либо свойство, оно будет анимироваться, а не изменяться напрямую. Это может быть связано с другим набором свойств, установленным для псевдокласса, например при наведении курсора, или новым классом или свойствами, установленными с помощью javascript.В приведенном ниже примере используется: наведите указатель мыши для изменения свойств — JavaScript не требуется.

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

Различные функции синхронизации

В дополнение к встроенным функциям синхронизации вы также можете указать свои собственные. Отличный инструмент Ceaser CSS Easing Tool делает это очень просто.

Стоит отметить, что получаемые вами кривые могут иметь отрицательные значения. Кривая Безье для последнего поля выше составляет кубических значений Безье (1.000, -0,530, 0,405, 1,425) , отрицательные значения заставляют его «разбегаться», что выглядит довольно круто!

Задержки

Синтаксис перехода CSS3 имеет вид:

переход: [ ||
                ||
               <переходная-синхронизирующая функция> ||
               ]

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

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

Это работает, просто добавляя задержку к каждому из разных кругов. Это так же просто, как добавить задержку перехода : 0,6 с; к стихии.

Расширенные задержки

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

# dd_main2 {
  переход: легкость включения-выключения всех единиц;
}

В кружке «Пример 1» (зеленый) вместо этого CSS:

# dd_main2 {
  свойство-переход: вверху, слева;
  продолжительность перехода: 1 с, 1 с;
  задержка перехода: 0 с, 1 с;
}

В то время как кружок «Пример 2» (красный) имеет вместо этого CSS:

# dd_main2 {
  свойство перехода: сверху, слева, радиус границы, цвет фона;
  продолжительность перехода: 2 с, 1 с, 0.5 с, 0,5 с;
  задержка перехода: 0 с, 0,5 с, 1 с, 1,5 с;
}

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

Анимированные свойства

Что касается свойств, которые можно анимировать, лучше всего поэкспериментировать. W3C поддерживает список свойств, которые можно анимировать в спецификации переходов CSS. К ним относятся все, от цвета фона и межбуквенного интервала до text-shadow и min-height.Многие из этих свойств по умолчанию не поддерживаются анимацией jQuery, что делает переходы CSS гораздо более полезными из коробки. Кроме того, многие браузеры аппаратно ускоряют анимацию, не требующую перерисовки, а именно непрозрачность, 3D-преобразования и фильтры. Чтобы увидеть методы, которые ускоряет Webkit, взгляните на код AnimationBase.cpp из источника Webkit. На момент написания здесь определены три класса: PropertyWrapperAcceleratedOpacity , PropertyWrapperAcceleratedTransform и PropertyWrapperAcceleratedFilter .Это анимации, которые ускоряет Webkit. Другие браузеры работают по-другому, но поскольку Webkit популярен на мобильных устройствах, где эти вещи наиболее важны, стоит отметить этот особый случай.

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

Название свойства	Тип
`цвет фона`	цвет
`фоновое изображение`	только градиенты
`фоновая позиция`	процентов, длина
`цвет нижней границы`	цвет
`ширина по краю снизу`	длина
`цвет рамки`	цвет
`левая рамка`	цвет
`ширина рамки слева`	длина
`цвет рамки справа`	цвет
`ширина рамки справа`	длина
`расстояние между границами`	длина
`цвет верхней границы`	цвет
`ширина до края`	длина
`ширина рамки`	длина
`низ`	длина, в процентах
`цвет`	цвет
`урожай`	прямоугольник
`размер шрифта`	длина, в процентах
`font-weight`	номер
`сетка- *`	разное
`высота`	длина, в процентах
`слева`	длина, в процентах
`межбуквенный интервал`	длина
`высота строки`	число, длина, проценты
`нижнее поле`	длина
`поле слева`	длина
`поле справа`	длина
`верхнее поле`	длина
`макс. Высота`	длина, в процентах
`макс. Ширина`	длина, в процентах
`мин. Высота`	длина, в процентах
`Мин. Ширина`	длина, в процентах
`непрозрачность`	номер
`контурный цвет`	цвет
`контур-офсет`	целое число
`ширина контура`	длина
`набивка нижняя`	длина
`прокладка левая`	длина
`прокладка правая`	длина
`утеплитель`	длина
`правый`	длина, в процентах
`текстовый отступ`	длина, в процентах
`тень текста`	тень
`верх`	длина, в процентах
`с выравниванием по вертикали`	ключевых слов, длина, процент
`видимость`	видимость
`ширина`	длина, в процентах
`интервал между словами`	длина, в процентах
`z-индекс`	целое число
`увеличение`	номер

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

Чтобы узнать больше о переходах CSS3, прочтите спецификацию W3C.

css — переход цвета фона

css — переход цвета фона — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 10 лет, 4 месяца назад

Просмотрено 663k раз

Я пытаюсь создать эффект перехода с background-color при наведении курсора на пункты меню, но это не работает.Вот мой код CSS:

  #content #nav a: hover {
    черный цвет;
    цвет фона: # AD310B;
    /* Fire Fox */
    -moz-transition: легкость включения всех единиц;
    / * WebKit * /
    -webkit-transition: легкость включения всех единиц;
    / * Опера * /
    -o-transition: легкость включения всех единиц;
    / * Стандарт * /
    переход: легкость включения всех единиц;
}

#nav div — это список пунктов меню ul .

Создан 10 дек.

Жан-Гай

3,155 22 золотых знака1313 серебряных знаков44 бронзовых знака

Насколько мне известно, в настоящее время переходы работают в Safari, Chrome, Firefox, Opera и Internet Explorer 10+.

Это должно вызвать у вас эффект затухания в следующих браузерах:

  а {
    цвет фона: # FF0;
}

a: hover {
    цвет фона: # AD310B;
    -webkit-transition: цвет фона 1000 мс, линейный;
    -ms-transition: background-color 1000 мс, линейный;
    переход: фоновый цвет 1000 мс, линейный;
}

   Ссылка для навигации

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

Это тоже может пригодиться: Основы CSS: CSS 3 Transitions

TylerH

18.9k4848 золотых знаков6565 серебряных знаков8585 бронзовых знаков

Создан 10 дек.

IliumIlium

1,911 11 золотой знак1313 серебряных знаков1111 бронзовых знаков

Для меня лучше поставить коды перехода с исходным / минимальным селекторами, чем с: hover или любыми другими дополнительными селекторами:

  #content #nav a {
    цвет фона: # FF0;
    
    -webkit-transition: цвет фона 1000 мс, линейный;
    -moz-transition: фоновый цвет 1000 мс, линейный;
    -o-transition: фоновый цвет 1000 мс, линейный;
    -ms-transition: background-color 1000 мс, линейный;
    переход: фоновый цвет 1000 мс, линейный;
}

#content #nav a: hover {
    цвет фона: # AD310B;
}

  
    
         Ссылка 1

Veve

6,13255 золотых знаков3636 серебряных знаков5353 бронзовых знака

Создан 03 июл.

Реза МамунРеза Мамун

1,997366 серебряных знаков3636 бронзовых знаков

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

  #content #nav a {
    цвет фона: # FF0;
    
    / * здесь требуется только продолжительность анимации, остальные не обязательны (также имя-анимации, но оно будет установлено при наведении) * /
    продолжительность анимации: 1 с; / * то же, что и продолжительность перехода * /
    функция-время-анимация: линейная; / * примерно то же, что и время перехода * /
    задержка анимации: 0 мс; / * то же, что и задержка перехода * /
    количество итераций анимации: 1; / * установите значение 2, чтобы он работал дважды, или Infinite, чтобы запускать вечно! * /
    направление анимации: нормальное; / * можно установить в «альтернативу», чтобы запустить анимацию, а затем запустить ее в обратном направлении.* /
    режим заливки анимации: нет; / * можно использовать для сохранения стиля ключевых кадров после анимации с «вперед» * /
    состояние воспроизведения анимации: работает; / * можно установить динамически для приостановки анимации в середине * /
    
    / * объявление состояний анимации для перехода через * /
    / * при желании добавить другие свойства, которые будут здесь меняться, или новые состояния (50% и т. д.) * /
    @keyframes onHoverAnimation {
    0% {
      цвет фона: # FF0;
    }
    100% {
      цвет фона: # AD310B;
    }
  }
}

#content #nav a: hover {
    / * анимация не запустится, если элементу не присвоено имя анимации.Устанавливается при наведении * /
    имя-анимации: onHoverAnimation;
}

Создан 20 ноя.

Очень активный вопрос . Заработайте 10 репутации, чтобы ответить на этот вопрос.Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css или задайте свой вопрос.

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Превратите все с легкостью — 2046

Давным-давно был Flash.Инструмент для веб-мастеров, которые считали HTML скучным, и тогда это было в некотором роде.
В то же время некоторые думали, что Близкий источник жесткий и замедляет эволюцию. И они были правы …
Сеть распахнулась, открытость открыла возможности для опасных, но живых изменений. Близкий источник медленно отводится в сторону и заменяется горящим открытым огнем.
Открытый исходный код взял на себя жесткость, и Flash сгорает, как сухая бумага.
Кто-то может сказать, что Интернет потерял важный инструмент, позволяющий сделать его больше, чем статичные информативные страницы.Некоторые потеряли лазейку в нашей системе. В любом случае Интернет стал более живым, чем когда-либо, и CSS3 — это только начало.

CSS3 большой переход

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

 <стиль>
a {
красный цвет;
}
a: hover {
цвет: розовый;
переход: все 0,4 с легкость входа-выхода;
}


 link

Объекты начали летать над поверхностью благодаря box-shadow

 
 ссылка

Тело начало дышать цветом с помощью клавиш анимации

Параллакс виден везде

И вдруг уже никто не пропускает Flash.

и это только начало…

А вот что мы сделали

 <стиль> .круг{
высота: 200 пикселей;
ширина: 200 пикселей;
цвет фона: красный;
радиус границы: 100%;
нижнее поле: 3 бэр;
граница: сплошной черный цвет 10 пикселей;
переход: легкость на все единицы;
переполнение: скрыто;
}
.circle: hover {
/ * граница: 10px solid # 333; * /
маржа: -30px -30px 0 0;
переход: легкость на все единицы;
радиус границы: 0;
}
.circle img {
максимальная ширина: 100%;
высота: авто;
}

Transition all: transition — CSS | MDN

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

Синтаксис

Значения

Примечание

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

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

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

CSS transition

Пример

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

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

Синтаксис CSS

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

Другие примеры

Пример

Похожие страницы

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

transition | Справочник CSS | schoolsw3.com

Обновляется!!! Справочник JavaScript

Пример

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

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

CSS Синтаксис

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

Примеры

Пример

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

transition — CSS: Cascading Style Sheets

Простой пример

HTML

CSS

свойство перехода — CSS: каскадные таблицы стилей

Значения

Простой пример

HTML

CSS

Псевдоэлементы — CSS: каскадные таблицы стилей

Не забудьте о переходе: все

Чем это полезно?

Заключение

переходов CSS | CSS-переходы, CSS-преобразования и CSS-анимация

Браузер Поддержка переходов CSS

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

Различные функции синхронизации

Задержки

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

Расширенные задержки

Анимированные свойства

css — переход цвета фона

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css или задайте свой вопрос.

Превратите все с легкостью — 2046

CSS3 большой переход

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