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

transition | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+1.0+26.0+11.6+12.10+3.0+4.0+16.0+2.12.0+

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

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 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
  • Событие перехода

Последнее изменение: , участниками MDN

Фоновый переход при наведении - Общие - Форум

Cem (Джем Мерик)

#1

Привет

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

 <стиль>
.контейнер-класс {
    -webkit-transition: фоновый 0.5s easy-in-out;
    -moz-transition: фон 0,5 с плавный вход-выход;
    переход: фон 0,5 с плавный вход-выход;
}

 

Серджи (Сергей Магдалин)

#2

Привет, @Cem, ты пытаешься изменить цвет фона? Или фоновое изображение? К сожалению, вы не можете преобразовать фоновое изображение с помощью CSS. Однако вы можете перевести его, «переместив» его с фоновым положением.

Цем (Джем Мерик)

, 4:36

#3

Привет @thesergie, я пробовал фоновое изображение.

Серджи (Сергей Магдалин)

#4

К сожалению, нельзя изменить фоновое изображение с помощью CSS. Это просто невозможно. Способ перехода между изображениями заключается в размещении двух элементов изображения друг над другом с использованием абсолютного позиционирования. Это то, что я сделал на этом сайте: symbols.webflow.com.

Цем (Джем Мерик)

#5

Спасибо, Сергей

Можно ли сделать общедоступную ссылку на symbol.

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

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