Moz transition: transition-property | htmlbook.ru

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

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

В следующем примере добавляется эффект перехода для свойства ширины и высоты с длительностью 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 и определенная, как показано ниже, для которой вы хотите, чтобы цвет фона изменялся при наведении курсора мыши:

  Button ; 

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

 #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;
} 

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

 
 
 #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 :
 Список браузеров: 
 Chrome 1.0
 Firefox (Gecko) 4.0 (2)
 Internet Explorer 10
 Opera 10.5
 Safari (WebKit) 3.2
 Чтобы сделать его совместимым со всем браузером, вы должны использовать  jQuery  или  JavaScript  в jQuery это просто с помощью функций  fadein ()  и  fadeout () . Есть несколько свойств перехода  , которые мы используем в этом  fade in / out   effect .
 Список свойств перехода CSS: 
 свойство перехода
 продолжительность перехода
 функция времени перехода
 задержка перехода
 В этом примере мы используем эти четыре свойства, которые влияют на  Навигатор .Как вы можете видеть в этом примере, я использовал другое свойство перехода   и продолжительность перехода   для разных браузеров, чтобы эффект постепенного появления / исчезновения остался в указанных выше браузерах. Вот 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;
}


 
.