Разное

Moz transition: transition-property | htmlbook.ru

08.07.2021

Содержание

transition-property | htmlbook.ru

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

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

Версии CSS

Описание

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

Синтаксис

transition-property: none | all | <свойство> [,<свойство>]*

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   body { margin: 0; }
   . menu {
    position: absolute;
    height: 100px; width: 100%;
    background: #fc0;
    border-bottom: 20px solid #333;
    top: -100px;
    /* Анимация */
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    transition-property: top;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
   }
   .menu:hover { top: 0; }
  </style>
 </head>
 <body>
  <div>
    А здесь у нас будет своё 
    меню с преферансом и профурсетками.
  </div>
 </body>
</html>

В данном примере при наведении курсора на блок он плавно изменяет своё положение.

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

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

Браузеры

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

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

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

transition-duration | htmlbook.ru

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

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

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

Версии CSS

Описание

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.

Синтаксис

transition-duration: <время> [,<время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-duration</title>
  <style>
   .warn {
    padding: 20px;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    -moz-transition-duration: 2s;
    transition-duration: 2s;
   }
   .warn:hover {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <div>Вы не учли, что скалярное 
  поле необходимо и достаточно!</div>
 </body>
</html>

В данном примере при наведении курсора на блок текста меняется цвет фона под блоком.

Браузеры

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

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

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

transition-delay | htmlbook.ru

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

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

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

Версии CSS

Описание

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Синтаксис

transition-delay: <время> [,<время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-delay</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: .
4s ease-out; -webkit-transition-delay: 0.5s; -o-transition: .4s ease-out; -o-transition-delay: 0.5s; -moz-transition: .4s ease-out; -moz-transition-delay: 0.5s; transition: .4s ease-out; transition-delay: 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.transitionDelay

Браузеры

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

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

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

moz-transition — свойство css :: руководство cssdot.ru

Свойство -moz-transition — универсальное свойство для задание эффекта анимированного перехода при изменении css-свойств элемента. Данное свойство представляет сокращенную запись для одновременного задания всех свойства перехода — свойство, к изменению которого будет применен плавный переход -moz-transition-property, длительность перехода -moz-transition-duration, способ расчета промежуточных значений 

-moz-transition-timing-function  и задержку перед началом перехода -moz-transition-delay.

Анимированный переход будет совершаться при изменении тех свойств элемента, которые указанны в -moz-transition-property, например, при помощи javascript. Не для всех свойств возможно задание анимированного перерода при изменении значения (например, труда себе представить, как должен выглядить анимированный переход при изменении свойства display) Список CSS свойств, к которым возможно применять эффект анимированного перехода, представлен далее:

background-color цвет
background-image
только градиенты
background-position проценты, размер
border-bottom-color цвет
border-bottom-width расстояние
border-color цвет
border-left-color цвет
border-left-width расстояние
border-right-color цвет
border-right-width расстояние
border-spacing расстояние
border-top-color цвет
border-top-width расстояние
border-width расстояние
bottom расстояние, проценты
color цвет
crop rectangle
font-size расстояние, проценты
font-weight
число
<grid-*> various
height расстояние, проценты
left расстояние, проценты
letter-spacing расстояние
line-height число, расстояние, проценты
margin-bottom расстояние
margin-left расстояние
margin-right расстояние
margin-top расстояние
max-height расстояние, проценты
max-width расстояние, проценты
min-height расстояние, проценты
min-width расстояние, проценты
opacity число
outline-color цвет
outline-offset число
outline-width
расстояние
padding-bottom расстояние
padding-left расстояние
padding-right расстояние
padding-top расстояние
right расстояние, проценты
text-indent расстояние, проценты
text-shadow shadow
top расстояние, проценты
vertical-align keywords, расстояние, проценты
visibility visibility
width расстояние, проценты
word-spacing расстояние, проценты
z-index число
zoom число

Пример

Свойство -moz-transition относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.

Смотри также:

  • transition — свойства анимационного перехода
  • transition-property — имя css-свойства, к которому будет применен анимационный переход.
  • transition-duration — длительность анимационного перехода
  • transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
  • transition-delay — задержка перед выполнением анимационного перехода
  • -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
  • -moz-transition-duration — длительность анимационного перехода
  • -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -moz-transition-delay — задержка перед выполнением анимационного перехода
  • -webkit-transition — свойства анимационного перехода
  • -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
  • -webkit-transition-duration — длительность анимационного перехода
  • -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -webkit-transition-delay — задержка перед выполнением анимационного перехода
  • -o-transition — свойства анимационного перехода
  • -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
  • -o-transition-duration — длительность анимационного перехода
  • -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
  • -o-transition-delay — задержка перед выполнением анимационного перехода

Краткое описание

свойства анимационного перехода

Синтаксис:

[&lt;‘transition-property’&gt; || &lt;‘transition-duration’&gt; || &lt;‘transition-timing-function’&gt; || &lt;‘transition-delay’&gt; [, [&lt;‘transition-property’&gt; || &lt;‘transition-duration’&gt; || &lt;‘transition-timing-function’&gt; || &lt;‘transition-delay’&gt;]]*

Применяется к:

все элементы, и псевдоэлементы :before и :after

Наследование:
не наследуется
Тип носителя:

визуальный

Объектная модель документа (DOM):

[элемент].style[‘-moz-transition’]


Кроссбраузерная совместимость

Internet Explorer
не поддерживается
Firefox
Chrome
не поддерживается
Safari
не поддерживается
Opera
не поддерживается

transition-delay — CSS: каскадные таблицы стилей

Свойство CSS transition-delay определяет продолжительность ожидания перед запуском эффекта перехода свойства при изменении его значения.

Задержка может быть нулевой, положительной или отрицательной:

  • Значение 0 с (или 0 мс ) немедленно запустит эффект перехода.
  • Положительное значение задержит начало эффекта перехода на заданный промежуток времени.
  • Отрицательное значение запустит эффект перехода сразу же и в середине эффекта. Другими словами, эффект будет анимирован так, как если бы он уже был запущен в течение заданного промежутка времени.

Вы можете указать несколько задержек, что полезно при переходе нескольких свойств. Каждая задержка будет применяться к соответствующему свойству, как указано в свойстве transition-property , которое действует как главный список. Если указано меньше задержек, чем в главном списке, список значений задержки будет повторяться, пока их не будет достаточно.Если задержек больше, список значений задержки будет усечен, чтобы соответствовать количеству свойств. В обоих случаях объявление CSS остается действительным.

 
задержка перехода: 3 с;
задержка перехода: 2 с, 4 мс;


задержка перехода: наследование;
задержка перехода: начальная;
задержка перехода: не задано;
  

Значения

<время>
Обозначает время ожидания между изменением значения свойства и началом эффекта перехода.

Пример, показывающий различные задержки

HTML
  
0,5 секунды
2 секунды
4 секунды
CSS
  .box {
  маржа: 20 пикселей;
  отступ: 10 пикселей;
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  размер шрифта: 18 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

.transformed-state {
  преобразовать: повернуть (270 градусов);
  цвет фона: синий;
  цвет: желтый;
  размер шрифта: 12 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

. delay-1 {
  задержка перехода: 0,5 с;
}

.delay-2 {
  задержка перехода: 2 с;
}

.delay-3 {
  задержка перехода: 4 с;
}
  
JavaScript
  function change () {
  const elements = document.querySelectorAll ("div.box");
  for (let element of elements) {
    элемент.classList.toggle ("преобразованное состояние");
  }
}

const changeButton = document.querySelector ("# изменение");
changeButton.addEventListener («щелкнуть», изменить);
  
Результат

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

transition-duration — CSS: Cascading Style Sheets

Свойство CSS transition-duration устанавливает время, в течение которого анимация перехода должна завершиться. По умолчанию значение 0 с , что означает, что анимация не выполняется.

Вы можете указать несколько длительностей; каждая длительность будет применяться к соответствующему свойству, как указано в свойстве transition-property , которое действует как главный список. Если указано меньше длительностей, чем в главном списке, пользовательский агент повторяет список длительностей. Если длительностей больше, список обрезается до нужного размера. В обоих случаях объявление CSS остается действительным.

 
продолжительность перехода: 6 с;
продолжительность перехода: 120 мс;
продолжительность перехода: 1 с, 15 с;
продолжительность перехода: 10 с, 30 с, 230 мс;


продолжительность перехода: наследование;
продолжительность перехода: начальная;
продолжительность перехода: не задано;
  

Значения

<время>
— это <время> , обозначающее количество времени, которое должен занять переход от старого значения свойства к новому значению.Время 0 с указывает, что перехода не произойдет, то есть переключение между двумя состояниями будет мгновенным. Отрицательное значение времени делает объявление недействительным.

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

HTML
  
0,5 секунды
2 секунды
4 секунды
CSS
  . box {
  маржа: 20 пикселей;
  отступ: 10 пикселей;
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  размер шрифта: 18 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
}

.transformed-state {
  преобразовать: повернуть (270 градусов);
  цвет фона: синий;
  цвет: желтый;
  размер шрифта: 12 пикселей;
  свойство-перехода: цвет фона размер шрифта преобразовать цвет;
  временная функция перехода: легкость входа-выхода;
}

.duration-1 {
  продолжительность перехода: 0,5 с;
}

.duration-2 {
  продолжительность перехода: 2 с;
}

.duration-3 {
  продолжительность перехода: 4 с;
}
  
JavaScript
  function change () {
  const elements = document.querySelectorAll ("div.box");
  for (let element of elements) {
    элемент.classList.toggle ("преобразованное состояние");
  }
}

const changeButton = document.querySelector ("# изменение");
changeButton. addEventListener («щелкнуть», изменить);
  
Результат

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

Переходов CSS


Переходы CSS

CSS-переходов позволяют плавно изменять значения свойств в течение заданного времени.

Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

В этой главе вы узнаете о следующих свойствах:

  • переход
  • задержка перехода
  • продолжительность перехода
  • переход-собственность
  • функция времени перехода

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

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

Имущество
переход 26,0 10,0 16,0 6,1 12,1
задержка перехода 26,0 10,0 16,0 6,1 12. 1
продолжительность перехода 26,0 10,0 16,0 6,1 12,1
переходная собственность 26,0 10,0 16,0 6,1 12,1
функция времени перехода 26,0 10.0 16,0 6,1 12,1

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

Для создания эффекта перехода необходимо указать две вещи:

  • свойство CSS, к которому вы хотите добавить эффект
  • длительность эффекта

Примечание: Если часть длительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию — 0.

В следующем примере показан красный элемент

размером 100 * 100 пикселей.
элемент также указал эффект перехода для свойства ширины с длительностью 2 секунды:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
фон: красный;
переход: ширина 2с;
}


Эффект перехода начнется, когда указанное свойство CSS (ширина) изменит значение.

Теперь давайте укажем новое значение для свойства width, когда пользователь наводит курсор на элемент

:

Обратите внимание, что когда курсор выходит за пределы элемента, он постепенно возвращается к своему исходному стилю.


Изменить несколько значений свойств

В следующем примере добавляется эффект перехода для свойства ширины и высоты с длительностью 2 секунды для ширины и 4 секунды для высоты:



Укажите кривую скорости перехода

Свойство временной функции перехода определяет кривую скорости эффекта перехода.

Свойство временной функции перехода может иметь следующие значения:

  • легкость — задает эффект перехода с медленным началом, затем быстрым, затем медленным завершением (по умолчанию)
  • linear — задает эффект перехода с одинаковой скоростью от начала до конца
  • easy-in — задает эффект перехода с медленным стартом
  • easy-out — задает эффект перехода с медленным концом
  • easy-in-out — задает эффект перехода с медленным началом и концом
  • cubic-bezier (n, n, n, n) — позволяет вам определять свои собственные значения в кубической функции Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

# div1 {функция-времени-перехода: линейная;}
# div2 {функция-времени-перехода: легкость;}
# div3 {функция-времени-перехода: easy-in;}
# div4 {функция-тайминг-перехода: easy-out;}
# div5 {функция-перехода: легкость входа-выхода;}

Попробуй сам »

Задержка эффекта перехода

Свойство transition-delay определяет задержку (в секундах) для эффекта перехода.

В следующем примере задержка перед запуском составляет 1 секунду:


Переход + преобразование

В следующем примере к преобразованию добавляется эффект перехода:


Дополнительные примеры переходов

Свойства перехода CSS можно указать одно за другим, например:

Пример

div {
свойство перехода: ширина;
продолжительность перехода: 2 с;
временная функция перехода: линейная;
задержка перехода: 1 с;
}

Попробуй сам »

или используя сокращенное свойство переход :


Проверьте себя упражнениями!


Свойства перехода CSS

В следующей таблице перечислены все свойства перехода CSS:

Имущество Описание
переход Сокращенное свойство для установки четырех свойств перехода в одно свойство
задержка перехода Задает задержку (в секундах) для эффекта перехода
продолжительность перехода Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода.
переходная собственность Задает имя свойства CSS, для которого применяется эффект перехода.
функция времени перехода Определяет кривую скорости эффекта перехода


Генератор переходов CSS | Создание CSS

Описание перехода

Свойство transition позволяет плавно изменять значения свойств CSS элемента html, плавно переходя от одного значения к другому, в течение определенного периода времени.Это свойство часто используется в состоянии : hover .

Предположим, у вас есть кнопка, обозначенная как MyButton и определенная, как показано ниже, для которой вы хотите, чтобы цвет фона изменялся при наведении курсора мыши:

 ; 

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

 #MyButton {width: 100px; цвет фона: # 337ab7; цвет белый;  переход: все 0,3 с легкостью } 

Первый параметр определяет, какое свойство CSS3 будет затронуто переходом. все означает, что переход выполняется для любого свойства CSS.
В нашем случае мы могли бы заменить все на background-color .

Второй параметр определяет продолжительность перехода в секундах (с) или миллисекундах (мс). В нашем примере продолжительность составляет 0,3 секунды.

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

  • easy: задает эффект перехода с медленным запуском, затем быстрым, затем медленным.Это значение по умолчанию.
  • linear: задает эффект перехода с одинаковой скоростью от начала до конца.
  • easy-in: задает эффект перехода с медленным стартом.
  • easy-out: задает эффект перехода с медленным концом.
  • easy-in-out: задает эффект перехода с медленным началом и медленным концом.

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

Теперь, когда переход установлен, мы можем использовать : hover , чтобы изменить цвет при наведении курсора мыши:

 #MyButton: hover {background-color: # 1e4668;
} 
Bouton

Можно комбинировать несколько переходов с разными свойствами, чтобы варьировать их с разной длительностью или задержкой.Ниже приведен пример:

 
 #MyDiv {width: 100px; высота: 100 пикселей; цвет фона: # 337ab7; : переход: фоновый цвет 0.3s, высота 2s, ширина 2s, ширина 2s; 
}
#MyDiv: hover {цвет фона: # e86200; высота: 150 пикселей; ширина: 150 пикселей;
} 

Не следует забывать систематически добавлять следующие префиксы браузеров, чтобы оставаться совместимыми с максимально возможным количеством браузеров:

 #MyDiv {-webkit-transition: all 0.3с легкость; -moz-transition: легкость всего 0.3s; -o-переход: легкость всего 0.3s; переход всего 0,3 с легкостью;
} 

Учитывая, что эти 4 строки должны быть включены, использование генератора CSS, такого как MakingCSS, экономит время и позволяет избежать ошибок.

Совместимость с браузером:

, переход


26,0
4,0 -webkit-


10,0


16,0
4,0 -moz-


6,1 -moz-



.1
10,5 -o-

Анимация · Isotope Docs

Isotope был разработан для использования лучших доступных функций браузера. Для анимации вы можете использовать переходы и преобразования CSS3 в соответствующих браузерах. Isotope обеспечивает откат анимации Javascript для меньших браузеров.

animationEngine option

Вы можете управлять тем, как Isotope обрабатывает анимацию, с помощью опции animationEngine . Эта опция имеет три значения, которые определяют, применяет ли jQuery стили с .css () или .animate () .

  • «лучший доступный» : если браузер поддерживает переходы CSS, Isotope использует . css () . В противном случае возвращается к использованию .animate () .
  • 'css' : Изотоп использует .css ()
  • 'jquery' : Изотоп использует .animate ()

CSS переходы

Чтобы включить анимацию с переходами CSS, вам понадобится следующий код в CSS:

 .изотоп,
.isotope .isotope-item {
  / * изменяем значение продолжительности на любое * /
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          продолжительность перехода: 0,8 с;
}

.isotope {
  -webkit-transition-property: высота, ширина;
     -moz-transition-property: высота, ширина;
      -ms-transition-property: высота, ширина;
       -o-свойство-перехода: высота, ширина;
          свойство-переход: высота, ширина;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, непрозрачность;
     -moz-transition-property: -moz-преобразование, непрозрачность;
      -ms-свойство-перехода: -ms-преобразование, непрозрачность;
       -o-свойство-перехода: -o-преобразование, непрозрачность;
          свойство-переход: преобразование, непрозрачность;
}

/ **** отключение переходов Isotope CSS3 **** /

. isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0 с;
     -moz-transition-duration: 0 с;
      -ms-transition-duration: 0 с;
       -o-transition-duration: 0 с;
          продолжительность перехода: 0 с;
}
  

Варианты

С помощью этих двух параметров вы можете точно контролировать обработку анимации в браузерах.

Лучшее из имеющихся (рекомендуется)

Браузеры, поддерживающие переходы CSS, будут их использовать. Другие браузеры вернутся к использованию анимации jQuery.

  • Добавить объявлений перехода CSS

Всегда использовать jQuery

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

  • Анимация Двигатель: 'jquery'
  • Нет Объявления перехода CSS

Никогда не устанавливать animationEngine: 'jquery' И добавлять объявления перехода CSS. Это вызовет двойную анимацию в браузере, поддерживающем переходы CSS, а это плохо.

Только переходы CSS

  • Анимация Двигатель: 'css'
  • Добавить объявлений перехода CSS

Нет

Анимация не включена ни в одном браузере

  • Анимация Двигатель: 'css'
  • Нет Объявления перехода CSS
Изотоп Дэвида ДеСандро / Metafizzy

Понимание переходов CSS3 - отдельный список

Это был 1997 год, и я сидел в ужасно запущенной квартире в красивом Олстоне, штат Массачусетс.Типичная поздняя ночь просмотра исходников и изучения HTML следовала за днем ​​упаковки компакт-дисков на местной звукозаписывающей компании за копейки (отсюда и обветшалая квартира). Я уверен, что вы понимаете.

Продолжение статьи ниже

В одну торжествующую ночь я ударил кулаком в сладкой победе. Я только что успешно закодировал свою первую замену изображений на JavaScript. Помните те?

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

За последнее десятилетие мы прошли большой путь в области взаимодействия и визуального восприятия в Интернете. Исторически такие технологии, как Flash и JavaScript, позволяли использовать эффекты анимации, движения и взаимодействия. Но недавно, когда браузеры развернули поддержку переходов и преобразований CSS, часть этой анимации и расширения возможностей теперь можно легко перенести в наши таблицы стилей.

Моя первая замена JavaScript в 1997 году потребовала от меня нескольких ночей ломания головы, множества строк кода, которые в то время казались мне чуждыми, и множества изображений. Сегодня CSS3 обеспечивает гораздо более богатое и гибкое взаимодействие с помощью простых строк кода, которые, к счастью, постепенно ухудшаются в браузерах, которые еще не поддерживают его.

Мы можем начать использовать переходы CSS3 прямо сейчас, если тщательно выберем ситуации, в которых их использовать. Они определенно не заменят существующие технологии, такие как Flash, JavaScript или SVG (особенно без более широкой поддержки браузеров), но их можно использовать для повышения уровня взаимодействия с пользователем на ступеньку выше.И, что наиболее важно, их относительно легко реализовать для веб-дизайнера, уже знакомого с CSS. Это займет всего несколько строк кода.

Собака виляет хвостом # section2

Изначально разработанная исключительно командой WebKit для Safari, переходы CSS теперь являются рабочим проектом спецификации W3C. Это хороший пример превращения инноваций в браузеры в потенциальный стандарт. Я говорю "потенциал", потому что сегодня это всего лишь черновик. Однако Opera недавно добавила поддержку переходов CSS в версии 10.5 и Firefox пообещали поддерживать версию 4.0. Другими словами, несмотря на то, что это черновая версия спецификации, она достаточно стабильна, чтобы Opera и Firefox отнеслись к ней серьезно и добавили для нее поддержку. Что наиболее важно, переходы CSS больше не являются проприетарными экспериментами только для Safari.

Давайте посмотрим, как работают переходы, ладно?

Что такое переходы CSS? # Section3

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

W3C объясняет переходы CSS довольно просто:

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

Вот простой пример, в котором мы добавим переход к замене цвета фона ссылки. При наведении указателя мыши цвет фона ссылки изменится, и мы воспользуемся переходом, чтобы сгладить это изменение - эффект, который ранее был возможен только с использованием Flash или JavaScript, но теперь возможен с помощью нескольких простых строк CSS.

Разметка представляет собой простую гиперссылку, например:

   Перевести меня!   

Затем мы добавим объявление для нормального состояния ссылки с небольшим отступом и светло-зеленым фоном, а затем поменяем фон на темно-зеленый при наведении курсора:

  а.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  }
a.foo:hover {
  фон: # 690;
  }  

Рисунок 1: Нормальное состояние и состояние : hover ссылки.

Теперь давайте добавим переход к изменению цвета фона. Это сгладит и оживит разницу в течение определенного периода времени.

[youtube https://www.youtube.com/watch?v=8v7ltfDGKTc?fs=1&hl=en_US&w=540&h=328]

Рис. 2. Здесь мы видим плавный переход от светло-зеленого к более темно-зеленому фону.

В настоящее время мы будем использовать только свойства с префиксом поставщика, которые в настоящее время работают в браузерах на основе WebKit (Safari и Chrome), чтобы упростить задачу. Позже мы добавим префиксы поставщиков для Mozilla и Opera.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition-свойство: фон;
  -webkit-transition-duration: 0.3 с;
  -webkit-transition-time-function: легкость;
  }
a.foo:hover {
  фон: # 690;
  }  

Вы заметите три части перехода в декларации:

  • свойство-перехода : свойство, для которого выполняется переход (в данном случае свойство фона)
  • transition-duration : Как долго должен длиться переход (0.3 секунды)
  • transition-time-function : Скорость перехода с течением времени (легкость)

Функции времени (или, если бы я действительно обращал внимание на математику) # section5

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

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

Для нашего простого примера продолжительность перехода настолько мала (всего 0,3 секунды), что будет трудно отличить шесть вариантов. Для более длительных анимаций функция времени, которую вы выбираете, становится более важной частью головоломки, так как есть время, чтобы заметить изменения скорости по длине анимации.

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

Мы могли бы значительно упростить объявление, используя сокращенное свойство перехода:

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  }
a.foo:hover {
  фон: # 690;
  }  

Теперь у нас есть гораздо более компактное правило, которое дает тот же результат.

Все эти замечательные переходы отлично работают в браузерах WebKit, но как насчет других?

Как я упоминал ранее, переходы изначально были разработаны WebKit и присутствуют в Safari и Chrome с версии 3.2, но Opera поддерживает их также в версии 10.5, а поддержка обещана в Firefox 4.0. Из-за этой поддержки в настоящее время и в ближайшем будущем важно добавить соответствующие префиксы поставщиков, чтобы наши переходы работали в большем количестве браузеров по мере развертывания поддержки.

Создание полного стека переходов # section7

Вот измененное объявление, добавляющее префиксы -moz и -o , а также собственно свойство перехода CSS3. Мы помещаем свойство без префикса в стек последним, чтобы гарантировать, что окончательная реализация превзойдет другие, когда свойство переходит из состояния черновика в состояние завершения.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  -moz-transition: фон 0. 3с легкость;
  -o-transition: фоновая легкость 0,3 с;
  переход: фоновая легкость 0,3 с;
  }
a.foo:hover {
  фон: # 690;
  }  

С помощью этого стека мы будем сглаживать изменение цвета фона в текущих версиях Safari, Chrome и Opera, а также в будущих версиях любого браузера, который решит его поддерживать.

Переходные состояния # section8

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

Например, вы можете захотеть, чтобы переход также происходил на псевдоклассах : focus или : active ссылки. Вместо того, чтобы добавлять стек свойств перехода к каждому из этих объявлений, инструкции перехода прикрепляются к нормальному состоянию и поэтому объявляются только один раз.

В следующем примере тот же переключатель фона добавляется в состояние : focus . Это позволяет запускать переход при наведении курсора мыши на ссылку или при фокусировке на ней (например, с помощью клавиатуры).

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость фона 0,3 с;
  -moz-transition: фоновая легкость 0,3 с;
  -o-transition: фоновая легкость 0,3 с;
  переход: фоновая легкость 0,3 с;
  }
a.foo:hover,
a.foo:focus {
  фон: # 690;
  }  

Перенос нескольких свойств # section9

Предположим, что наряду с цветом фона мы также хотим изменить цвет текста ссылки и переход к нему. Мы можем сделать это, соединив несколько переходов вместе, разделив их запятыми.У каждого из них может быть различная продолжительность и временные функции (рис. 3).

[youtube https://www.youtube.com/watch?v=YhFJH7ryUzQ?fs=1&hl=en_US&w=538&h=328]

Рис. 3. Нормальное и : наведение состояний ссылки.

  a.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: фон .3s легкость,
    цвет 0.2с линейный;
  -moz-transition: фон .3s легкость,
    цвет 0.2с линейный;
  -o-переход: фон .3s легкость, цвет 0.2s линейный;
  переход: фон.3с легкость, цвет 0.2с линейный;
  }
a.foo:hover,
a.foo:focus {
  цвет: # 030;
  фон: # 690;
  }  

Перенос всех возможных свойств # section10

Альтернативой перечислению нескольких свойств является использование значения все . Это переместит все доступные свойства.

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

  а.foo {
  отступ: 5 пикселей 10 пикселей;
  фон: # 9c3;
  -webkit-transition: легкость всего 0.3s;
  -moz-transition: легкость всего 0.3s;
  -o-переход: легкость всего 0.3s;
  переход: вся легкость 0,3 с;
  }
a.foo:hover,
a. foo:focus {
  цвет: # 030;
  фон: # 690;
  }  

Это удобный способ отслеживать все изменения, происходящие в : hover , : focus или : active , без необходимости перечислять каждое свойство, которое вы хотите перенести.

Какие свойства CSS можно изменять? # Section11

Теперь, когда мы успешно перенесли фон и цвет гиперссылки, есть много других свойств CSS, которые можно перенести, включая ширину , непрозрачность , положение и размер шрифта .Диаграмма всех возможных свойств (и их типов), которые могут быть перенесены, доступна в W3C.

Почему бы вместо этого не использовать JavaScript? # Section12

Вам может быть интересно, почему не все браузеры поддерживают (или, по крайней мере, обещают поддержку) переходов CSS, почему бы не использовать решение JavaScript для обработки анимации? Популярные фреймворки, такие как jQuery, Prototype и script.aculo.us, уже некоторое время поддерживают анимацию через JavaScript, которая работает в кросс-браузере.

Все зависит от того, насколько важны переходы для опыта.В этой небольшой книге я подчеркиваю, что вы можете оценить простоту и гибкость CSS3, если выберете соответствующие части пользовательского опыта для его применения: обогащение взаимодействий, происходящих на странице. Довольно часто анимация этих взаимодействий при обработке переходов CSS не является неотъемлемой частью бренда, удобочитаемости или макета веб-сайта. Поэтому несколько простых строк CSS для запуска простой анимации, встроенной в поддерживающие ее браузеры (вместо использования инфраструктуры JavaScript), кажутся разумным выбором.И я рад, что в нашем распоряжении есть.

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

fade In / fade out с CSS Transition

Легко сделать fade in / fade out effect с чистым CSS , что означает отсутствие необходимости в JavaScript или jQuery . Но этот fade in / out effect работает только в последних версиях браузеров, вот список поддерживаемых браузеров WebKit :

Список браузеров:

  1. Chrome 1.0
  2. Firefox (Gecko) 4.0 (2)
  3. Internet Explorer 10
  4. Opera 10.5
  5. Safari (WebKit) 3.2

Чтобы сделать его совместимым со всем браузером, вы должны использовать jQuery или JavaScript в jQuery это просто с помощью функций fadein () и fadeout () . Есть несколько свойств перехода , которые мы используем в этом fade in / out effect .

Список свойств перехода CSS:

  1. свойство перехода
  2. продолжительность перехода
  3. функция времени перехода
  4. задержка перехода

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

 
  • На главную
  • О нас
  • Портфойло
  • Сервировки
  • Свяжитесь с нами

 #container {
ширина: 200 пикселей;
}
#container ul {
стиль списка: нет;
}
#container li {
семейство шрифтов: Verdana;
размер шрифта: 13 пикселей;
высота: 35 пикселей;
высота строки: 35 пикселей;
дисплей: блок;
свойство-переход: фон, цвет;
продолжительность перехода: 1 с;
временная функция перехода: легкость выхода;
-webkit-transition-property: фон, цвет;
-webkit-transition-duration: 1 с;
-moz-transition-property: фон, цвет;
-moz-transition-duration: 1 с;
-ms-transition-property: фон, цвет;
-ms-transition-duration: 1 с;
-o-transition-property: фон, цвет;
-o-transition-duration: 1 с;
фон: #fff;
цвет: # 333;
font-weight: жирный;
отступ: 0 10 пикселей;
}
#container li: hover {
свойство-переход: фон, цвет;
продолжительность перехода: 1 с;
временная функция перехода: легкость выхода;
-webkit-transition-property: фон, цвет;
-webkit-transition-duration: 1 с;
-moz-transition-property: фон, цвет;
-moz-transition-duration: 1 с;
-ms-transition-property: фон, цвет;
-ms-transition-duration: 1 с;
-o-transition-property: фон, цвет;
-o-transition-duration: 1 с;
фон: # 71A571;
цвет: #fff;
}


 

.

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

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