HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.
Переходы
Loading...
來自 Moscow Institute of Physics and Technology 的課程
Основы HTML и CSS
170 個評分
Moscow Institute of Physics and Technology
170 個評分
課程 2（共 5 門，Specialization Разработка интерфейсов: вёрстка и JavaScript）
從本節課中
Анимации в CSS
На пятой неделе вы узнаете про основные виды трансформаций и о том, как создать анимации только при помощи CSS. Разумеется, попрактикуетесь в создании анимаций разных уровней сложности.
與講師見面
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
Здравствуйте!
В этом видео я хочу вам рассказать о таком понятии, как переходы.
Переходы — это анимация от одного набора свойств к другому.
Для того чтобы выполнить переход, нужно соблюсти несколько условий.
Первое условие: должно существовать два набора свойств —
начальный набор свойств и конечный.
Второе условие: нужно установить свойство transition, которое описывает,
к какому свойству нужно сделать переход.
И также там указываются характеристики анимации перехода.
Третье условие: должен существовать инициатор — это действие,
которое вызывает изменение от одного набора свойств к другому.
Например, это могут быть псевдоклассы, такие как :hover, :target,
:focus или :active.
Также в качестве инициатора может выступать
javascript или же добавление каких-то классов или id.
Давайте рассмотрим пример.
У нас есть кнопка,
и мы хотим при наведении увеличить плавно эту кнопку на 20 %.
Для этого мы задаем свойство transition-property, где указываем,
какое свойство мы хотим анимировать.
И указываем свойство transition-duration, которое указывает длительность анимации.
В данном случае это 300 миллисекунд, или 0,3 секунды.
При наведении кнопка увеличивается плавно на 20 %.
Также можно осуществлять переход для нескольких свойств.
В этом случае мы указываем в свойстве transition-property значения через
запятую.
В данном примере мы делаем переход для свойства transform и background-color.
Задаем длительность анимации для каждого из свойств.
Для transform мы задаем 0,3 секунды, а для background-color мы задаем на самом деле
тоже 0,3 секунды, но в других единицах, то есть 300 миллисекунд.
И указываем начальное значение, то есть background-color у нас #ccc.
При наведении мы изменяем эти свойства,
то есть указываем фону цвет красный и увеличиваем кнопку на 20 %.
При наведении на кнопку она увеличивается и становится красной.
Эти переходы происходят плавно.
То есть браузер уже сам заботится о том, как нужно осуществить эти переходы,
как менять свойства.
Иногда возникает потребность, чтобы анимация начиналась немного позже.
Например, мы хотим, чтобы цвет кнопки поменялся не сразу при наведении,
а, например, через 500 миллисекунд.
Для этого мы указываем свойство transition-delay и через
запятую указываем значения для каждого из свойств.
Если мы хотим указать значение одно для всех свойств,
можно указать только лишь одно значение.
В данном примере мы меняем цвет через 500 миллисекунд после начала анимации.
Итак, при наведении у нас увеличивается кнопка за 300 миллисекунд,
и через еще 200 миллисекунд происходит изменение цвета.
В сумме длительность анимации произошла 300 миллисекунд,
плюс 200 миллисекунд и плюс еще 500 миллисекунд.
Также у переходов можно указывать временную функцию, то есть это функция,
которая показывает завершенность выполнения какого-то перехода от времени.
Например, если указано значение linear,
то переход будет выполняться плавно и равномерно.
Также есть другие значения, например, linear, ease, ease-in, ease-out.
А есть еще также дискретные значения, например, как steps,
то есть переход происходит рывками.
По умолчанию установлено значение ease.
Если мы включим все эти анимации, то мы увидим, что они могут менять
свою скорость, но завершаются они все в одно и то же время.
Можно создавать свою временную функцию.
Для этого нужно воспользоваться функцией cubic-bezier.
В этом случае мы указываем две координаты — xy1, xy2.
Также в материалах к видео можно найти ссылку на генератор этих функций.
Также там есть готовые примеры.
И можно использовать эту функцию для создания реалистичных физических эффектов.
Рассмотрим пример.
Мы хотим, чтобы у нас взлетала ракета.
Но как взлетает ракета?
Она сначала набирает скорость, то есть движется медленно,
и потом в какой-то момент времени ускоряется.
Мы хотим, чтобы анимация длилась три секунды, и указываем временную функцию,
указав функцию cubic-bezier.
Указываем координаты точки.
Я подобрал эти точки при помощи генератора,
указав нужные координаты, и экспериментальным путем вывел эту функцию.
И когда мы запустим анимацию, мы увидим, что ракета сначала взлетает медленно,
а затем ускоряется.
Писать все свойства для перехода в отдельности не очень удобно.
Поэтому существует короткая запись, и для этого используется свойство transition.
Первым значением указывается свойство, для которого осуществляется переход,
затем длительность анимации, timing-function,
и в конце указывается задержка для анимации.
Можно указать несколько свойств, соответственно, указываются через запятую.
Например, для transform мы хотим,
чтобы длительность была 500 миллисекунд и timing-function ease-in.
И мы хотим указать для background-color также задержку.
В этом случае нам приходится некоторые параметры дублировать и в конце добавлять
задержку.
Можно записать очень коротко, и в этом случае мы указываем только свойство
transition и значение all, то есть анимируются все возможные свойства.
И указываем длительность анимации.
Все остальное установлено по умолчанию: timing-function установлено в значении
ease, и задержка — это ноль секунд.
В этом видео вы узнали, что такое CSS-переходы.
Но на самом деле CSS-переходы очень ограничены.
В следующем видео я расскажу вам, как делать многоступенчатые анимации.
