Кроме того, отдельные объявления можно объединить в одну сокращенную версию: Transition: all 1s ease 0s;
При написании сокращенной версии важно помнить, что первым значением времени задается transition-duration, а вторым — transition-delay.
Как и всегда, важно использовать префиксы поставщиков. Например, набор вариантов с префиксами поставщиков предыдущего сокращенного объявления выглядел бы следующим образом:
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s; transition: all 1s ease 0s;
Мы разместили «официальную» версию без префикса, в силу чего она будет иметь приоритет над остальными, когда браузеры полностью реализуют соответствующий стандарт.
ОГРАНИЧЕНИЯ ПЕРЕХОДОВ.
При использовании переходов нужно помнить о некоторых ограничениях. К отдельным свойствам, например к свойству background-gradient, нельзя применить эффект перехода, несмотря на то что в спецификации (и даже в самом последнем редакторском черновике по адресу http://dev. w3.org/csswg/css3-transitions/) говорится, что это допустимо. Однако теоретически вы можете применить эффект перехода ко всем свойствам, перечисленным по адресу http:// www.w3.org/TR/css3-transitions/#properties-from-css-.
Применение разных по длительности эффектов перехода к различным свойствам.
Если в правиле объявлено несколько свойств, то вам не обязательно применять ко всем одинаковые по длительности эффекты перехода. Взгляните на следующее правило:
#content a {
… (еще стили)…
Transition-property: border, color, text-shadow; transition-duration: 2s, 3s, 8s;
}
Здесь, в transition-property, мы указали, что хотим применить эффект перехода к border, color и text-shadow. Затем, в объявлении transition-duration, мы определили, что для border эффект перехода должен длиться 2 секунды, для color — 3 секунды, а для text-shadow — 8 секунд. Порядок разделенных запятыми значений длительности соответствуют порядку свойств, к которым будет применяться эффект перехода.
Добавить комментарий