Transition background size: css — css3 background-size transition animation in Webkit doesn’t work… Bug? Or wrong syntax? — Вебджем.рф

Содержание

transition | htmlbook.ru

Internet Explorer	Chrome		Opera		Safari	Firefox		Android	iOS
10.0+	1.0+	26.0+	11.6+	12.10+	3.0+	4.0+	16.0+	2.1	2.0+

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

Значение по умолчанию	all 0s ease 0s
Наследуется	Нет
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after
Процентная запись	Неприменима
Ссылка на спецификацию	http://dev.w3.org/csswg/css3-transitions/#transition

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>

Значения

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

Пример

HTML5CSS3IE 10+CrOpSaFx

<!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; /* Выравнивание по центру */
     /* Переход */
     -webkit-transition: top 1s ease-out 0. 5s;
     -moz-transition: top 1s ease-out 0.5s;
     -o-transition: top 1s ease-out 0.5s;
     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>

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

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

[window.]document.getElementById(«elementID»).style.transition

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition.

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

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

Анимация

CSS по теме

transition

Статьи по теме

Иконки из символов
Полоски при наведении

Рецепты CSS

Как плавно изменить цвет ссылки?

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

Свойство CSS transition является сокращенным свойством для transition-property , transition-duration , transition-timing-function и transition-delay .

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

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

transition-delay
длительность перехода
свойство перехода
функция времени перехода

 /* Применить к 1 свойству */
/* имя свойства | продолжительность */
переход: край-справа 4s;
/* имя свойства | продолжительность | задерживать */
переход: край-справа 4с 1с;
/* имя свойства | продолжительность | функция ослабления */
переход: поле-вправо 4s облегчение входа-выхода;
/* имя свойства | продолжительность | функция смягчения | задерживать */
переход: поле-вправо 4 с, облегчение входа-выхода 1 с;
/* Применить к 2 свойствам */
переход: поле-справа 4s, цвет 1s;
/* Применить ко всем измененным свойствам */
переход: все 0,5 сек. 
/* Глобальные значения */
переход: наследовать;
переход: начальный;
переход: возврат;
переход: обратный слой;
переход: не установлен;

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

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

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

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

 transition = 
 #  "> = 
 [ нет |  ] || 
  || 
  || 
 < время > 
  "> = 
 all | 
  
  "> = 
 linear | 
 <линейная-функция-замедления> | 
 <кубическая-безье-функция смягчения> | 
 <ступенчатая-функция-замедления> 
  "><линейная-функция-замедления> = 
 linear(<линейный-список-остановок>) 
  "><кубическая-функция-замедления-Безье> = 
 легкость | 
 легкость | 
 облегчение | 
 легкость входа-выхода | 
 cube-bezier( <число [0,1]> , <число> , <число [0,1]>
  , <число> ) 
  "><шаг-функция смягчения> = 
 шаг-начало | 
 шаг -end | 
 шагов(  [  ]? ) 
  "> = 
 [  ]# 
  "> = 
 переход-начало | 
 переход-конец | 
 переход-нет | 
 переход-оба | 
 начало | 
 конец 
  "> = 
 <число> && 
 ? 
  "> = 
 {1,2}

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

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

`HTML`

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

`CSS`

 . цель {
  размер шрифта: 14px;
  переход: размер шрифта 4s 1s;
}
.цель:наведите {
  размер шрифта: 36px;
}

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

Спецификация
Переходы CSS # transition-shorthand-property

 B 900 загружать таблицы только в браузере CD0015 с включенным JavaScript. Включите JavaScript для просмотра данных. Использование переходов CSS
  Событие перехода 
  Последнее изменение:   27 сентября 2022 г.  , участниками MDN
 Фоновый переход при наведении - Общие - Форум 
 Cem
 (Джем Мерик)  23 апреля 2014 г., 2:22 
 #1
 Привет
 Я не могу найти опцию фонового перехода, если я хочу добавить эффект перехода при наведении курсора. Помимо добавления ниже в качестве пользовательского кода, есть ли другой вариант?
   <стиль>
.контейнер-класс {
    -webkit-transition: фоновый 0.5s easy-in-out;
    -moz-transition: фон 0,5 с плавный вход-выход;
    переход: фон 0,5 с плавный вход-выход;
}

 
 Серджи
 (Сергей Магдалин)  25 апреля 2014 г., 17:52 
 #2
 Привет, @Cem, ты пытаешься изменить цвет фона? Или фоновое изображение? К сожалению, вы не можете преобразовать фоновое изображение с помощью CSS. Однако вы можете перевести его, «переместив» его с фоновым положением.
 Цем
 (Джем Мерик)  28 апреля 2014 г.
  , 4:36 
 #3
 Привет @thesergie, я пробовал фоновое изображение.
 Серджи
 (Сергей Магдалин)  1 мая 2014 г., 17:27 
 #4
 К сожалению, нельзя изменить фоновое изображение с помощью CSS. Это просто невозможно. Способ перехода между изображениями заключается в размещении двух элементов изображения друг над другом с использованием абсолютного позиционирования. Это то, что я сделал на этом сайте: symbols.webflow.com.
 Цем
 (Джем Мерик)  5 мая 2014 г., 00:46 
 
 #5
 Спасибо, Сергей
 Можно ли сделать общедоступную ссылку на symbol.

Transition background size: css — css3 background-size transition animation in Webkit doesn’t work… Bug? Or wrong syntax?