В этом году я провел собеседование со многими студентами, и всякий раз, когда я вижу резюме, в котором говорится «знание CSS3», я спрашиваю о знаниях, связанных с анимацией. Однако я обнаружил, что:2019Спустя годы все еще есть много студентов, которые не будутCSSанимация.
Вопрос, который я часто люблю задавать, заключается в том, чтобы добиться следующих эффектов:
То есть маленький шарик движется с постоянной скоростью справа200px, затем вернитесь назад, пройдите мимо и оставайтесь на200pxМесто.
Эффект анимации следующий:
Это такая простая анимация, но большинство людей не могут ответить на нее правильно.
Без дерьма, мой ответ:
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 2s linear 3 alternate both;
}
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
Большинство интервьюеров говорили, что оCSSАнимация, я видел несколько туториалов, но я мало использую ее на работе, поэтому забыл об этом.
Здесь я готовCSSДрузья, у которых нет глубокого понимания анимации, должны добавить соответствующие знания. Добро пожаловать к большим парням.
Текст начинается.
Его можно найти через инструменты разработчика,animationСвойство (анимация) является сокращением для 8 свойств.
Конкретные значения этих 8 атрибутов следующие:
| Атрибуты | описывать |
|---|---|
| animation-duration | Указывает время, необходимое анимации для завершения цикла, в секундах (с) или миллисекундах (мс), по умолчанию 0. |
| animation-timing-function | Определяет функцию синхронизации анимации, которая представляет собой кривую скорости анимации.По умолчанию используется "легкость". |
| animation-delay | Указывает время задержки анимации, т.е. когда анимация начинается, по умолчанию 0. |
| animation-iteration-count | Указывает, сколько раз воспроизводится анимация, по умолчанию 1. |
| animation-direction | Определяет направление, в котором будет воспроизводиться анимация. По умолчанию нормально. |
| animation-fill-mode | Определяет режим заливки анимации. По умолчанию нет. |
| animation-play-state | Определяет состояние воспроизведения анимации, запущено или приостановлено. По умолчанию работает. |
| animation-name | Указывает имя анимации @keyframes. |
Давайте подробно объясним по порядку, для чего используется каждый атрибут анимации и на что нужно обратить внимание.
CSSАнимация, также известная как анимация по ключевым кадрам. пройти через@keyframesдля определения ключевых кадров.
Всем знакомо понятие кадра, например, фильм — это кадр из воспроизводимых картинок, и изображение используется, чтобы оставаться в мозгу человека на короткое время для формирования динамического эффекта.CSSАнимация также использует этот принцип. Однако разработчику не нужно давать определение каждому кадру. Просто определите несколько ключевых кадров. Для остальной части кадра браузер будет интерполировать его на основе функции синхронизации.
такие как нашиdivЧтобы повернуть круг, вам нужно только определить начальный и конечный кадры:
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
в,rotateэто имя, которое я дал этой анимации,fromпредставляет первый кадр,toУказывает кадр в конце.
Точнее,CSSАнимация использует проценты для описания цикла анимации,fromФактически0%прозвище,toда100%прозвище. ключевые кадрыrotateЭквивалентно:
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
После определения ключевого кадра вы можете использовать его напрямую:
animation: rotate 2s;
или:
animation-name: rotate;
animation-duration: 2s;
пройти черезanimation-name来指定动画使用的关键帧，这个是必须的。 использоватьJSЧтобы понять слова, эквивалент: только переменные объявления недостаточно, нам также нужно использовать.
Кроме того, приведенный выше код также указывает время запуска анимации.animation-durationдля2s. Окончательный результат выглядит следующим образом:
Эффект анимации не слишком очевиден, когда квадрат вращается, он не равномерен. Из-за свойств скорости анимации в этот моментanimation-timing-functionЗначение по умолчаниюease, то есть сначала быстро, а потом медленно.
Следующая временная диаграмма иллюстрирует перемещение некоторых значений атрибутов функции case:
animation-timing-functionОбщие значения:linear,ease,ease-in,ease-out,ease-in-out. Эти значения на самом делеcubic-bezier(n,n,n,n)особый случай. Они называются кривыми Безье. Помимо инструментов разработчика, автор «Демистификации CSS» также написал веб-сайт для онлайн-отладки кривых Безье:cubic-bezier.com. Точка знания кривой Безье очень полезна,canvasИмеются также соответствующиеAPI. На самом деле есть много моментов, которые можно расширить, и это только предварительное введение.
Следует отметить, что еще одним интересным значением свойства временной функции являетсяstepsфункция, которую можно использовать для реализации покадровой анимации:
Здесь вводится атрибут функции синхронизации, и значение всегда будет использоваться позже.linear, Это означает равномерную анимацию.
Возвращаясь к ключевым кадрам, мы добавляем ключевые кадры, которые определяют начальную и конечную позиции (если не указано иное).0%а также100%, браузер автоматически сделает вывод), конечно, вы также можете указать, что такое рамка любого процента, например, другая реализация начального примера:
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #0ff;
animation: move 6s linear both;
}
@keyframes move{
0%{
transform: translate(0,0);
}
33%{
transform: translate(200px,0);
}
66%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
Код ключевого кадра является избыточным и может быть дополнительно сокращен:
@keyframes move{
0%, 66%{
transform: translate(0,0);
}
33%,100%{
transform: translate(200px,0);
}
}
В этот момент продолжительность анимации была изменена на6s, когда анимация проходит треть пути, пустьdivроды200px, две трети возвращаются в исходное положение, а конец переходит в200pxместо.
Это относительно интуитивная реализация, и многие интервьюеры обычно думают об этом.
Уведомлениеanimation: move 6s linear both;в заявленииboth. это собственностьanimation-fill-modeзначение . Это свойство легко упустить из виду, но оноCSSВажное свойство анимации. Буквально переводится как режим заливки анимации, что это значит?
@keyframesОн просто определяет значение каждого кадра во время процесса анимации, но в каком состоянии элемент изменяется до начала анимации и после ее окончания?animation-fill-modeЭто об этом. кроме значения по умолчаниюnoneКроме того, есть еще 3 значения:
- вперед, указывая, что после завершения анимации состояние элемента остается состоянием последнего кадра.
- назад означает, что при задержке анимации состояние элемента остается состоянием первого кадра до начала анимации.
- оба, что указывает на то, что оба вышеупомянутых эффекта имеют одинаковый эффект.
Например,divот100pxперейти к200pxКлючевые кадры at определяются как:
@keyframes move{
0%{
transform: translate(100px,0);
}
100%{
transform: translate(200px,0);
}
}
Установите режим заполнения наforwards, анимация останавливается в конце200pxВ:
установить задержку анимации1sПосле выполнения и режим заполненияbackwards, вы можете видеть, что анимация находится в100px, вернуться после окончания анимации0pxВ:
Наконец, установите режим заполнения наbothситуация:
После окончания анимации сохраняем состояние последнего кадра анимации.Это очень полезно.Например, мы можем реализовать индикатор выполнения:
div{
height: 10px;
border: 1px solid;
background: linear-gradient(#0ff,#0ff);
background-repeat: no-repeat;
background-size: 0;
animation: move 2s linear forwards;
}
@keyframes move{
100%{
background-size: 100%;
}
}
Эффект следующий:
упомянутое выше, которое можно использоватьanimation-delayУстановите время задержки. Не всем внимание, задержка может быть отрицательной. Отрицательная задержка означает, что анимация, по-видимому, выполнялась задолго до ее запуска.
Возьмите приведенный выше индикатор выполнения в качестве примера, оригинальная анимация использует2sОт0%загружен в100%из. Если установлена задержка-1s. Эта анимация начнется с50%загружен в100%. Кажется, он работает1sТакой же:
CSSАнимацию можно поставить на паузу. Атрибутыanimation-play-stateУказывает состояние воспроизведения анимации, значение по умолчаниюrunningзначит играть,pausedОбозначает паузу:
animation-play-stateЭто свойство очень полезно, его можно использовать с отрицательной задержкой для достижения специальных эффектов, таких как плагин индикатора выполнения:
Есть еще два свойства, которые до сих пор не были введены, одно из нихanimation-iteration-countУказывает, сколько раз воспроизводится анимация. Это легко понять, только одно замечание, используйте при бесконечной игреinfinite. Другое направление воспроизведенияanimation-direction, что означает, что указанная анимация воспроизводится в указанном порядке@keyframesОпределенные ключевые кадры. Его значения:
- нормальное значение по умолчанию.
- reverse указывает, что анимация воспроизводится в обратном порядке.
- чередование означает прямое и обратное пересечение.
- чередующийся-реверс означает обратный и прямой кроссовер.
Индикация следующая:
animationБыли введены атрибуты и 8 суб-атрибутов, и следует отметить, что они связаны сbackgroundКак и его подпункты, он поддерживает несколько значений, то есть нанесение нескольких анимаций в тот же элемент, предоставляя вам желаемый золотой обруч:
<style>
div{
margin: 200px;
height: 20px;
border: 1px solid;
animation: rotate 2.5s infinite, color 2s infinite, width 3s infinite;
animation-direction: normal, normal, alternate;
}
@keyframes rotate {
100%{
transform: rotate(360deg);
}
}
@keyframes color {
20%{
background-color: #f91;
}
80% {
background-color: #0ff
}
}
@keyframes width {
0% {
width: 40%;
}
100% {
width: 70%;
}
}
Эффект следующий:
Эта статья закончилась.