Разное

Transition all: transition — CSS | MDN

19.04.2021

Содержание

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 Transitions

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


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 | 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, который не следует использовать в производственном коде.
P
  • :: part () Это экспериментальный API, который не следует использовать в производственном коде.
  • :: placeholder Это экспериментальный API, который не следует использовать в производственном коде.
S Т
  • :: target-text Это экспериментальный API, который не следует использовать в производственном коде.
Спецификация Статус Комментарий
CSS Уровень 1 Рекомендация Определенные псевдоклассы и псевдоэлементы.
Браузер Самая низкая версия Опора
Internet Explorer 8,0 : псевдоэлемент
9.0 : псевдоэлемент :: псевдоэлемент
Firefox (Gecko) 1,0 (1,0) : псевдоэлемент
1,0 (1,5) : псевдоэлемент :: псевдоэлемент
Opera 4,0 : псевдоэлемент
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 , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 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 бронзовых знака

1

Насколько мне известно, в настоящее время переходы работают в 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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *