Автор оригинала: FreeCodeCamp Community Member.
CodedRaken.
В этом введении в статью веб-анимации мы рассмотрим основные анимации CSS, используя псевдо классы , Переходы и Преобразования Отказ
Если вы не уверены, почему вы должны использовать анимацию CSS, а затем посмотрите на эти Статьи Отказ
Некоторые базовые (и очень уродливые (на данный момент)) пример кода для этой статьи будут на кодепене:
Срабатывает
Прежде чем мы прыгаем в некоторые анимации, давайте подумаем о том, как они будут активированы. Большинство наших анимаций не будут работать сразу, когда нагрузка страницы. Чаще Они будут вызвать изменением класса (через JavaScript) или использование классов псевдо.
Pseudo foo.
Вот несколько псевдо классы которые чаще всего используются для анимации.
: hover Псевдо-класс Hover срабатывает, когда вы Наведите курсор на цель с мышью. В этом примере мы устанавливаем < ; P> Чтобы изменить его цвет в синий, когда завис. Он вернется обратно к своему первоначальному цвету после того, как мышь переместится от него.
Hover example
: фокус
(Хм … Разве это не нравится использовать слово, чтобы определить себя ??)
Фокус в основном используется для входов и кнопок, когда они выбраны/активированы – то есть Когда вы нажимаете на вход или вкладку в него Отказ В этом примере нажатие или вкладка на вход приведет к изменению ширины и ее фона. Нажатие из него заставит его вернуться к своему первоначальному размеру (и цвет).
: Active Активный кажется похожим на фокус, но это обычно только вызвано для доли секунды Отказ Первое использование случая, которое приходит на ум, являются якорями (ссылки). В этом примере мы делаем что-нибудь с классом активировать Измените, пока он нажал (то есть, пока он активен).
Click me!
Activate me!
Трансформаторы
Преобразование – это то, где вы принимаете анимацию CSS на следующий уровень. Существует 21 или около того функций, которые вы можете использовать с преобразованием, но мы не будем охватывать их всех в этой статье.
Перевести (x, y)
Перевести означает, что вы перемещаете что-то. В приведенном ниже примере мы перемещаем все, что есть Перевести Класс 10rem на оси X и 5rem на оси Y. (Если вы не знакомы с REM, вы можете использовать пиксели тоже.)
Это сложная функция, которая сочетает в себе X и Y, но вы можете использовать translatex или Перевести вместо этого, если вы предпочитаете.
Масштаб (х, у)
Похоже на Перевести Масштаб также имеет Scalex , чешуйся и а масштаб Функция сокращения. Использовать масштаб к изменить размер чего-либо Отказ В приведенном ниже примере элементы с масштаб класс сводится до половины их размера.
Преобразование-происхождение (X, Y, Z)
Преобразование – происхождение является важным свойством при работе с анимацией, особенно вращениями. Это немного странно и сложно объяснить только с словами, и я настоятельно рекомендую смотреть на документы MDN для этого, если вы еще не знакомы с изменением происхождения (вроде в Photoshop). Слова документации лучше всего:
Представьте колесо:
Когда колесо вращается, вращается вокруг этой центральной точки. Но теперь представьте, что центральная точка была перенесена, скажем, верхний левый угол. Теперь колесо вращается вокруг этой новой точки, обеспечивающей совершенно другой опыт. Эта центральная точка похожа на происхождение. Увидеть Кодепен Для интерактивного примера.
Вращаться (угол)
Поверните именно то, что он говорит, что это говорит. Вы можете указать любой угол, отрицательный, положительный, любой номер, и он сильно раскрутит его вокруг. Есть несколько разных ценностей, которые вы можете использовать (DEG, RAD, GROD) – Смотрите больше типов ценностей на MDN Отказ
Делать вещи гладкими
Использование Переходы Мы можем сгладить вещи и контролировать поток наших анимаций.
Переходы похожи на Tweens или Контроль скорости для нашей анимации. Это может принять 4 аргумента, и я буду покрывать каждый подробно.
Переход – свойство
Свойство перехода – Что вы анимаете Отказ Это может быть цвет, размер, преобразование и так далее. Вы могли бы также сказать Все Перейти все, но вы должны избегать этого и быть более конкретным.
Есть Огромный список свойств Вы можете оживить на MDN. Вы должны избегать анимирования ничего не в списке.
Переход – свойство: все;
Продолжительность перехода
Это Как долго анимация примет, чтобы закончить Отказ Используйте секунды или миллисекунды.
Переход-продолжительность: 2S;
Функция времени перехода
Это где он становится более сложным. Функция времени перехода – это Кривая ускорения, которая описывает, как потоки анимации Отказ Посмотрите на эти сайты Посмотреть, как выглядит эта кривая и как она влияет на анимацию.
Вы можете легко прославить, медленно начать затем закончить быстро или более сложный поток с некоторыми медленными частями и быстрыми частями. Есть много способов иметь ваш анимационный поток.
К счастью, есть некоторые предопределенные значения, которые мы можем использовать:
easeease-inease-outease-in-outlinearstep-startstep-end
Вам придется играть с ними немного, чтобы найти один для вашей анимации.
Иногда нам придется сделать наше собственное использование Cubic-Bezier (или использовать библиотеку ). Для этого я предлагаю вам найти онлайн-инструмент (см. Выше ссылок) или использовать инструменты разработчика вашего браузера, чтобы сделать один.
Transition-Timing-Функция: Cubic-Bezier (0,29, 1,01, 1, -0,68);
задержка перехода
Это, возможно, самое простое значение. Задержка перехода – это время, которое он будет Подождите, прежде чем начать эффект Отказ Используйте секунды или миллисекунды.
Задержка перехода: 500 мс;
Переход (свойство, продолжительность, время, задержка)
Вы догадались, это Сокращение объединить все вышеперечисленные функции.
Вот что он выглядит с одним переходом:
Переход: предпосылка 1s облегчает 0,5с;
Для нескольких, вам нужно добавить их в тот же переход, разделенный запятой.
transition: background 1s ease-in-out 0.5s,width 2s ease-in,height 1.5s;
В заключении
Это все, что вам нужно, чтобы начать делать интерактивные веб-сайты. Идите практикуйте, что вы узнали, и как только вы освоили темы, покрытые здесь, вы можете перейти к более продвинутым анимациям.
В следующей статье (или два) я расскажу о ключевые кадры, 3D преобразования, производительности, анимации JavaScript и многое другое.
Спасибо за прочтение! Если у вас есть какие-либо вопросы, комментарии или критика, пожалуйста, оставьте комментарий ниже, и я отвечу как можно скорее.