CSS animation
20 февраля 2020 CSS
Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет, цвет фона, высота или ширина. В этой статье рассмотрим на примерах, как использовать анимацию на чистом CSS с помощью этого свойства.
Каждую анимацию необходимо определить с помощью правила @keyframes, которое затем вызывается со свойством animation, например:
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}Каждое правило @keyframesопределяет, что должно происходить в определенные моменты анимации. Например, 0% — это начало анимации, а 100% — это конец. Эти ключевые кадры могут затем управляться либо сокращенным свойством animation, либо его восемью доп. свойствами, чтобы дать больше контроля над тем, как следует манипулировать этими ключевыми кадрами.
Содержание
Доп. свойства animation
animation-name — объявляет имя правила @keyframes, которым нужно манипулировать.
animation-duration — продолжительность анимации для завершения одного цикла.
animation-timing-function — устанавливает предустановленные кривые ускорения, такие как ease или linear.
animation-delay — время между загружаемым элементом и началом последовательности анимации.
animation-direction — устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
animation-iteration-count — сколько раз анимация должна быть выполнена.
animation-fill-mode — устанавливает, какие значения применяются до / после анимации.
Например, вы можете установить последнее состояние анимации, чтобы оно оставалось на экране, или вы можете настроить его на возврат до того момента, когда анимация началась.
animation-play-state — приостановить/воспроизвести анимацию.
Здесь есть нужные аналоги ксарелто
Эти доп. свойства могут быть использованы следующим образом:
@keyframes stretch {
/* действия animate здесь */
}
.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
тоже самое:
*/
.element {
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}Вот полный список значений, которые может принимать каждое из этих под-свойств:
animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
animation-duration | Xs or Xms |
animation-delay | Xs or Xms |
animation-iteration-count | X |
animation-fill-mode | forwards, backwards, both, none |
animation-direction | normal, alternate |
animation-play-state | paused, running, running |
Несколько шагов
Если анимация имеет одинаковые начальные и конечные свойства, полезно разделить запятыми значения 0% и 100% внутри @keyframes:
@keyframes pulse {
0%, 100% {
background-color: yellow;
}
50% {
background-color: red;
}
}Несколько анимаций
Вы можете разделить запятыми значения, чтобы объявить несколько анимаций в селекторе. В приведенном ниже примере мы хотим изменить цвет круга в @keyframe, одновременно подталкивая его из стороны в сторону другим.
.element {
animation:
pulse 3s ease infinite alternate,
nudge 5s linear infinite alternate;
}Производительность
Анимация большинства свойств является проблемой производительности, поэтому мы должны действовать с осторожностью, прежде чем анимировать любое свойство. Однако существуют определенные комбинации, которые можно безопасно анимировать:
transform: translate()transform: scale()transform: rotate()opacity
Какие свойства можно анимировать?
Если возникнет необходимость, вы можете найти большой список свойств CSS, которые можно анимировать в документации к вашему браузеру. Анимационные свойства имеют тенденцию к цветам и числам. Примером неанимаемого свойства является background-image.
Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее
Фильтры CSS - это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее
Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д. Раньше Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
CSS transition - это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Добавить комментарий