• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Свойство CSS Transition

Свойство CSS Transition

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active, т.е. при переходе объекта из одного состояния в другое.


Синтаксис CSS transition

transition: [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>;

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

  • <transition-property>
  • <transition-duration>
  • <transition-timing-function>
  • <transition-delay>

Примеры со свойством Transition

Пример #1. Анимация в html через transition

<html> <head> <style> .primer1{ width:100px; height:100px; background:#444; margin:30px; transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; } .primer1:hover{ width:120px; height:120px; background:#AAA; margin:30px; transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; } </style> </head> <body> <div class="primer1"></div> </body> </html>

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

  • all - плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color, тогда плавный переход распространился бы только на цвет
  • 1s - время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
  • linear - объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)


Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform.


Пример #2. Увеличение объекта в html без смещения других объектов

<html> <head> <style> .primer2{ width:100px; height:100px; background:#444; margin:30px; transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; } .primer2:hover{ width:100px; height:100px; background:#AAA; margin:30px; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; } </style> </head> <body> <div class="primer2"></div> </body> </html>

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.


Рассмотрим детально какие значения может принимать каждый из параметров


Значения свойств transition

1. Параметр transition-property

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

  • all - ко всему объекту (можно опустить, если задано время)
  • color - к цвету текста
  • background - к цвету фона объекта
  • width, height - к изменению габаритов по ширине и высоте соответственно
  • none - анимация отсутствует (по умолчанию стоит у каждого элемента)

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


2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

0s
0.5s
1s
2s
3s

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration: 1s;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function
transition-timing-function: value;

Где value может принимать значения:

  • ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start - мгновенный старт, равносильно параметру steps(1, start)
  • step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
  • cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
  • steps(a,b) - изменение рывками

Например

linear
ease
ease-in
ease-out
ease-in-out
step-start
step-end
steps(3)
steps(10)


4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

0s
0.5s
1s
2s
3s

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

<html> <head> <style> .raznye_zaderzhki { width: 100px; height: 100px; background: #444; margin: 30px; font-size: 14px; color: #0f0; border: 3px solid #bbb; transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease; -moz-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease; -webkit-transition: font-size 3s linear,background-color 1s linear, color 1s ease-in-out, width 2s ease; -o-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease; } .raznye_zaderzhki:hover { background-color: #000; color: #0ff; width: 500px; font-size: 23px; } </style> </head> <body> <div class="raznye_zaderzhki"></div> </body> </html>

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

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

  • -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform-origin - для Chrome, Safari, Android и iOS
  • -o-transform-origin - для Opera до версии 12.10
  • -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

[window.]document.getElementById("elementID").style.transition


Читайте также:
• Как сделать треугольник через CSS
• Свойство display
• Свойство transform-origin
• Свойство transition
• Свойство nth-child
• Свойство font
• Свойство overflow
• Свойство box-shadow
• Медиа запросы (@)

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru