2.19. CSS3-переходы

css3-transitionCSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after. Для задания всех свойств перехода обычно используют краткую запись свойства transition.

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

Поддержка браузерами

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.

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

transition-property
Значения:
none Отсутствие свойства для перехода.
all Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойство Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

2. Продолжительность перехода transition-duration

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

transition-duration
Значения:
время Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

See the Pen LRpLbk by Elena (@html5book) on CodePen.

3. Функция перехода transition-timing-function

Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.

transition-timing-function
Значения:
ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-in Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

See the Pen CSS Timing Function by Elena Nazarova (@nazarelen) on CodePen.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

easing
Рис. 1. Пользовательские функции cubic Bézier с сайта easings.net
Пользовательское название Значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

transition-delay
Значения:
время Время задержки перехода указывается в секундах или миллисекундах.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

See the Pen wzKZoj by Elena (@html5book) on CodePen.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition

{transition: transition-property transition-duration transition-timing-function transition-delay;}

Если воспользоваться значениями по умолчанию, то запись

div {transition: 1s;}

будет эквивалентна

div {transition: all 1s ease 0s;}

6. Плавный переход нескольких свойств

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

div {transition: background 0.3s ease, color 0.2s linear;}

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

See the Pen gbLXYK by HeleN (@nazarelen) on CodePen.

  • Paco Official

    Спасибо!

  • Ami Akari

    -webkit-transition-property: width; Господа, что означает приставка webkit?

    • В этом примере начальная ширина блока 100px, при наведении курсором мыши на блок установлена ширина блока 300px.
      Поскольку разные браузеры работают на разных движках (движок — это программа, которая преобразует html-код и css-стили в веб-страницу, которую вы видите в окне браузера), то для корректного отображения некоторых свойств требуется добавления браузерного префикса — приставки производителя (-webkit-, -moz-, -ms-, -o-) к названию css-свойства.

  • Максим Лисицкий

    Здравствуйте!
    Подскажите пожалуйста!
    Для чего используются в примере для «transition-timing-function» , если и без них прекрасно работает?
    И почему работает ссылка по якорю #reset, если id=»reset» ни где не прописано?

  • Froncast

    Добрый день. Не могу разобраться, как в примере с несколькими блоками которые передвигаются вправую сторону по нажатию на кнопку «Запустить» реализуется возврат их на место, когда нажимаешь кнопку «Назад».

    • Добрый день. Кнопка «Назад» содержит несуществующий якорь, поэтому блоки возвращаются к своему первоначальному состоянию.

      • Froncast

        Большое спасибо. Все оказалось гораздо проще чем я думал) Эх, мне еще учиться и учиться. Спасибо Вам за предоставленные уроки информацию)

      • Froncast

        Кстати, вспомнил еще один вопрос которых хотел Вам задать.
        Не подскажете, как можно сделать последовательную анимацию с помощью css.
        К примеру по кнопке «Запуск» появляется какой-нибудь текст, блок №1 плавно меняет свой цвет и размер, когда он полностью меняется, изменения происходят с другим блоком. А не так чтобы по кнопке запуск сразу оба блока меняли свои свойства.
        Надеюсь понятно описал)

        • Задать для второго блока задержку анимации animation-delay, равной времени выполнения цикла анимации первого блока.

          • Froncast

            Что-то у меня не получается) Может я просто не туда подставляю данное свойство или же оно не подходит в моем случае.
            Вот код, посмотрите, пожалуйста :3 http://codepen.io/keima/pen/yMMPNY

          • Я думала про анимацию)) Тогда вам нужно transition-delay. А какой эффект для второго блока вы хотели воспроизвести?

          • Froncast

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

          • Froncast

            В ходе «баловства» появился еще один вопрос) Можно ли сделать чтобы блоки самостоятельно возвращались к первоначальному состоянию, спустя какое-то время, а не по нажатию на кнопку «Сбросить» ?
            http://codepen.io/keima/pen/yMMPNY?editors=1100

          • В данном случае нет. Если не привязываться к :target, то можно попробовать этот приём https://html5book.ru/animirovannye-perekhody/.

          • Froncast

            Хм. Как вариант решения вопроса, но тут наведение курсора. Можно ли это применить к клику на кнопку?

          • Для вашего последнего варианта:

            #stick1:checked ~ .blocks > div { animation: block 4s linear}
            @keyframes block {
              50% {
                background-color: #FF1493;
                border-radius: 0;
                transform: rotate(45deg);
              }
            }
            

            Единственное, сработает только при первом клике. Остальные варианты — только на скрипте.

          • Froncast

            Елена, у Вас есть возможность хотя бы примерно объяснить данный код: http://codepen.io/jcoulterdesign/pen/JWExdX
            Первый раз сталкиваюсь с тем чтобы html код выглядел подобным образом и %, а также функции в css коде. Можно просто направить, подсказав что это и где можно почитать об этом)

          • Код этого примера написан на препроцессорах — Haml и SCSS. Вы можете увидеть скомпилированный (преобразованный в привычные для вас html и css) код для разметки и стилей, нажав на соответствующий пункт редактора:
            https://uploads.disquscdn.com/images/48b06784c94c94ab557cbc0cd80d5bad520157a6423624c2a4a1a108effbe086.png

          • Froncast

            И снова, больше спасибо)

          • Пожалуйста ☺

  • Юлия Мася

    Привет, всем! Подскажите, пожалуйста, как сделать такую штуку. У нас есть картинка, которая имеет эффект приближения и есть блок с текстом, который выезжает снизу, наезжая на картинку. То есть получается, что наводя на картинку, картинка увеличивается и внизу на картинку наезжает блок с текстом.
    Заранее спасибо)

    • Посмотрите этот пример http://codepen.io/html5book/pen/oZwRQb. С помощью трансформации сдвигаем блок с текстом за границы основного блока вниз на 100% его высоты, а для картинки при наведении задаём масштабирование (значение можете взять любое). Для основного блока задаём обрезку за границами, чтобы ни блок с текстом, ни картинка не показывались при трансформировании.

  • Andrey Limar

    хАрошие примеры с отлично поданым материалом, вот если бы к примерам «додать»(добавить) — как перевернуть блочный элемент с момощью свойства «transition» и используя анимацию или «onmouse», было бы вообще чудно!

  • unKnown_observer

    transition-delay и animation-delay мне их действия както не заметно. 😀

    • Первое устанавливает задержку при изменении значений тех или иных css-свойств при наведении, фокусе и т.п. , то есть при взаимодействии пользователя с элементами страниц. Второе устанавливает задержку запуска анимации, которая тоже меняет значения свойств, но анимация может запускаться как при наведении, фокусе и т.п., так и без взаимодействия пользователя, после загрузки страницы.

  • unKnown_observer

    есть block:
    #block{
    width: 100px;
    height; 100px;
    backround: red;
    opacity: 0.5
    }
    нужно менять прозрачность! Тесть В начале block мутно красный а потом становиться светлым и должен задержаться на какойто промежуток времени и опять должен стать мутным! И так должно повторяться повторяться и повторяться бесконечно!
    HELP ME!

  • Lana

    Здорово. Спасибо! Применила))