Анимация

Компоненты CDS уже включают в себя анимацию, однако взаимодействие компонентов друг с другом, а так же анимация в компонентах на уровне приложений определяется продуктовой командой.

Стиль

Basic анимация

Обозначает отклик на действия пользователя, при этом не отвлекает его от выполнения основного сценария.

Пример использования:

• Наведение на кнопку
• Переключатели

Accent анимация

Привлекает внимание пользователя к событию или элементу интерфейса.

Пример использования:

• Системные предупреждения и ошибки
• Появление уведомлений

Плавность движения

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

ease-in-out

Взаимодействие с элементом, видимым от начала и до конца анимации.

Пример использования:

• Переключение контент свитчера
• Сортировка в таблице

Стиль	Параметр	CSS
basic	ease-in-out, basic	cubic-bezier(0.37, 0, 0.63, 1)
accent	ease-in-out, accent	cubic-bezier(0.45, 0, 0.55, 1)

ease-in

Элемент быстро появляется и замедляется до полной остановки.

Пример использования:

• Добавление элементов
• Появление модального или всплывающего окна

Стиль	Параметр	CSS
basic	ease-in, basic	cubic-bezier(0.12, 0, 0.39, 0)
accent	ease-in, accent	cubic-bezier(0.11, 0, 0.5, 0)

ease-out

Элемент ускоряется при исчезновении.

Пример использования:

• Удаление элементов
• Закрытие модальных и всплывающих окон

Исключениями являются случаи, когда элемент исчезает с поля зрения пользователя, но остается в интерфейсе, готовый к повторному вызову. В таких случаях используйте ease-in-out.

Например боковая панель — перед тем, как покинуть поле зрения анимация панели замедляется, намекая пользователю, что она в свернутом состоянии и готова к повторному вызову.

Стиль	Параметр	CSS
basic	ease-out, basic	cubic-bezier(0.61, 1, 0.88, 1)
accent	ease-out, accent	cubic-bezier(0.5, 1, 0.89, 1)

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

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

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

Реализация

@import '../mixins/scss/motion';

// Используется по умолчанию.

.example-animation {
    @include cds-animation-motion($cds-duration-fast-short, 'ease-in-out', 'basic');
}

// Используется когда нужно анимировать определенные css-свойства более гибко.

.example-animation-v2 {
    transition: transform ($cds-duration-fast-long + ms) getMotion('ease-in-out', 'basic');
}