—»     —»   Как использовать CSS3-параметр transition
  Раздел: CSS/Style Sheets   Комментариев: 3  

Как использовать CSS3-параметр transition

Вместе с объявлением о выходе CSS3 было представлено множество новых функций, которые теперь можно использовать для создания невероятных эффектов. Один из наиболее удобных параметров называется transition.

Как использовать CSS3-параметр transition

Параметр transition – это важное нововведение в CSS. Его можно использовать для создания динамических эффектов, применяемых к div-элементами или классам при помощи простой структуры:

transition: параметр продолжительность тайминг задержка;

Transition в CSS3 – это отличный способ добавить небольшую анимацию на сайт без необходимости заполнять его javascript-библиотеками наподобие jQuery.

Демо

Перед тем, как начать, предлагаем вам ознакомиться с демонстрацией параметра transition в действии.

Параметр

Прежде всего, для того чтобы этот параметр работал, нам нужно использовать стандартные параметры. Очевидно, два наиболее часто применяемых параметра – это ширина и высота. Для того чтобы использовать параметр отдельно, вы можете воспользоваться этим:

transition-property: параметр

Изменение размера

В продолжение, как только параметр будет определен, мы можем указать начальные и конечные значения. В случае когда это значения ширины или высоты, нужно выставить начальные значения параметра, а затем конечные, которые должны быть иными.

Например, здесь мы применили параметр transition к ширине, а затем указали начальное значение ширины, а затем указали конечное значение ширины (которое применяется при наведении на элемент курсора мыши:

#mainheader {
transition-property:width;
width:50px;
}
#mainheader:hover {
width:75px;
}

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

Теперь, когда мы определили, как будет трансформироваться параметр и начальное/конечное значения, нам нужно определить продолжительности перехода (transition). Это реализуется за счет определения длины в секундах или миллисекундах, как показано ниже:

transition-duration: продолжительность;

Данный пример формирует следующий код:

#mainheader {
transition-property:width;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}

Это означает, что div mainheader будет расширяться на 250 пикселей за 0.5 секунд.

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

Этого кода достаточно для того, чтобы создать привлекательный эффект, но тем не менее, мы можем пойти дальше, и воспользоваться CSS3-параметром transition с применением функции тайминга. При помощи этого параметра у нас будет возможность изменять значения в момент воспроизведения перехода. Параметр transition по умолчанию выставлен на линейную кривую. Тем не менее, вы можете выставить функции смягчения, кубическую кривую Безье и многое другое. Кубическая кривая Безье позволяет вам определять ваши собственные значения при помощи (n,n,n,n), где n может быть от 0 до 1 (например, линейная может быть (0,0,1,1)).

Использование этого кода в нашем примере даст нам следующее:

#mainheader {
transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}

Задержка

Более того, на подобии transition-duration, применение параметра transition-delay поможет нам установить задержку перед началом эффекта:

transition-delay: время;

Завершение

Наконец, при использовании CSS3-параметра перехода, важно учитывать две вещи. Во-первых, на данный момент для большинства браузеров необходимо указывать браузерные префиксы (исключением являются разве что браузеры IE10, Opera и Firefox 16+) :

-moz-transition: для Firefox 15
-webkit-transition: для Chrome и Safari

(имейте в виду, что IE9 и ниже не поддерживают параметр transition вообще).

Во-вторых, хотя мы и использовали в примере более описательный и понятный вид, рекомендуем вам использовать сокращенные формы. Выглядит это примерно следующим образом:

#mainheader {
-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:500px;
}
#mainheader:hover {
width:750px;
}

Используете ли вы CSS3-параметр transition? Можно ли его сравнить с подобными эффектами на jQuery? Расскажите нам в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11198   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 января 2013 @ 15:48
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
У вас ошибочка: в предложении
Это означает, что div mainheader будет расширяться на 250 пикселей за 5 секунд.
нужно написать за 0.5 секунд или исправьте в листинге transition-duration: 5s;
Комментарий #2: 8 января 2013 @ 13:12
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
mrnobody, да, действительно. Спасибо, исправлено.
Комментарий #3: 14 марта 2013 @ 09:36
Написал: Антон — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я хочу его применять, но т.к. он работает в IE10 соответственно применять его еще рано.
Много пользователей еще работают под ослом особенно старых версий.
А так очень неплохой параметр.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031