SpaceWebDev — Современный подход к FrontEnd

CSS Переходы

CSS - Transitions (Plan)

Основное определение
Анимируемые CSS свойства
transition-duration
transition-delay
transition-property
transition-timing-function
transition

CSS-переходы (transitions)

позволяют задать плавный переход CSS-свойствам, т. е. значения свойств изменяются постепенно в течении определенного (заданного) промежутка вермени

Использование CSS переходов

Анимируемые CSS свойства

Использование

Полезные материалы:

Два способа установки Node.js
Полезные команды для работы с Node.js
browsersync.io – Официальный сайт утилиты Browser Sync

Команда запуска локального сервера Browser Sync:

        browser-sync start --server --no-notify --files "css/*.css,js/*.js,*.html"

transition-duration

задает длительность эффекта перехода

        selector {
          transition-duration: 1s; /* Длительность перехода */
        }

transition-duration: DEMO

transition-duration: <параметры>

<время> [,<время>]* — задается в "s" или "ms"

transition-duration

transition-delay

задает задержку перед запуском эффекта перехода

        selector {
          transition-delay: 1s; /* Задержка перед запуском */
          transition-duration: 2s;
        }

transition-delay: DEMO

transition-delay: <параметры>

<время> [,<время>]* — задается в "s" или "ms"

transition-delay

transition-property

определяет свойства, к которым будет применен эффект перехода

        selector {
          transition-property: all; /* По умолчанию all */
          transition-duration: 1s;
        }

transition-property: DEMO

transition-property: <параметры>

none — эффект перехода не будет применен
all — эффект перехода применится ко всем доступным свойствам
<свойство> [,<свойство>]* — указывается одно или несколько свойств, к которым применится эффект перехода

transition-property

transition-timing-function

определяет скорость и ускорение изменения значений свойств во время эффекта перехода

        selector {
          transition-timing-function: ease; 
          transition-duration: 1s;
        }

transition-timing-function: DEMO

transition-timing-function: <параметры>

linear — скорость перехода одинаковая от начала и до конца

cubic-bezier(0.0, 0.0, 1.0, 1.0)

Linear: DEMO

transition-timing-function

transition-timing-function: <параметры>

ease — начинается медленно, далее ускорение и к концу замедление

cubic-bezier(0.25, 0.1, 0.25, 1.0)

Ease: DEMO

transition-timing-function

transition-timing-function: <параметры>

ease-in — начинается медленно, к концу ускорение

cubic-bezier(0.42, 0.0, 1.0, 1.0)

Ease-In: DEMO

transition-timing-function

transition-timing-function: <параметры>

ease-out — начинается быстро, к концу замедление

cubic-bezier(0.0, 0.0, 0.58, 1.0)

Ease-Out: DEMO

transition-timing-function

transition-timing-function: <параметры>

ease-in-out — начинается и заканчивается медленно

cubic-bezier(0.42, 0.0, 0.58, 1.0)

Ease-In-Out: DEMO

transition-timing-function

transition-timing-function: <параметры>

steps(<число>, start | end) — без анимации, пошаговый переход

steps(2, start)

steps(4, end)

Steps: DEMO

transition-timing-function

transition-timing-function: <параметры>

step-start — свойства сразу принимают конечные значения

steps(1, start)

Step-Start: DEMO

transition-timing-function

transition-timing-function: <параметры>

step-end — свойства находятся в покое заданное время, после сразу принимают конечные значения

steps(1, end)

Step-End: DEMO

transition-timing-function

Полезные сервисы:

cubic-bezier.com — сервис, предоставляющий возможность быстро сгенерировать кривую Безье
easings.net — коллекция разных easing-функций на основе кривых Безье

transition

универсальная запись всех свойств, относящихся к CSS-переходам

        selector {
          transition: all 1s linear .25s; 
        }

transition: DEMO

transition: <параметры>

none — отменяет переход
порядок записи свойств:

transition