Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Использование свойства Transition в CSS3

Использование свойства Transition в CSS3

CSS3 transition

С приходом CSS3, нам стало доступно больше новых функций и свойств CSS, которые используются для различных эффектов, одним из самых интересных и полезных является свойство(property) Transition.

Transition является важным новым явлением в CSS. Это свойство может быть использовано для создания динамического эффекта изменения DIV или CLASS, используя простую структуру:

transition: property duration timing-function delay;

Этот CSS эффект – отличный способ добавить анимацию на сайте, без использования Javascript или jQuery!

Описываем свойство

Первое, что нам нужно сделать – указать параметры свойства Transition. Наиболее популярные – это ширина(width) и высота(height). Код выглядит следующим образом:

transition-property: <em>width;

Изменяем размер DIV

Изначально, нам также нужно указать стартовое значение параметра width.
В нашем примере, в параметрах свойства мы будем изменять ширину при наведении курсора. Установим первоначальную ширину DIV в 300px, а при наведении курсора в 640px:

#demotransition {

transition-property:width;
width:300px;
}
#demotransition:hover {
width:640px;
}

Длительность

Добавляем время, за которое должна быть показана анимация:

transition-duration<em>: duration;

Предположим, мы хотим указать время как 0.5 секунды, тогда в нашем примере код будет выглядеть следующим образом:

#demotransition {
transition-property:width;
transition-duration:0.5s;
width:300px;
}
#demotransition:hover {
width:640px;
}

Функция тайминга

Уже на данном этапе наш код достаточен для достижения эффекта, но мы также можем использовать дополнительные параметры, чтобы сделать эффект еще более привлекательным. Параметр transition-timimg-function позволяет нам замедлить или увеличить скорость анимации. Доступные параметры: ease, ease-in, ease-out, ease-in-out.

В нашем примере мы используем ease-in-out для замедления анимации:

#demotransition {
transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s;
width:300px;
}
#demotransition:hover {
width:640px;
}

Задержка

Если необходима задержка перед анимацией, можно указать время:

transition-delay: <em>time;

Заключение

Подводя итог, нужно отметить две вещи при использовании Transition:

  • Первое, большинству браузеров необходим префикс при описании CSS (исключения IE10, Opera и Firefox16+):
-moz-transition: для Firefox 15
-webkit-transition: для Chrome и Safari

Следует принять во внимание, что IE9 и предыдущие версии не отображают это свойство вообще.

  • Второе, для оптимизации кода, следует описывать свойство сокращенным inline кодом:
#demotransition {
-moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */
-webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */
transition: width ease-in-out 0.5s 0.1s;
width:300px;
}
#demotransition:hover {
width:640px;
}


#demotransition {
-moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */
-webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */
transition: width ease-in-out 0.5s 0.1s;
width:300px;
}
#demotransition:hover {
width:640px;
}

Высоких вам конверсий!

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний