CSS animation

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-functionease, 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-durationXs or Xms
animation-delayXs or Xms
animation-iteration-countX
animation-fill-modeforwards, backwards, both, none
animation-directionnormal, alternate
animation-play-statepaused, 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.

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Как сделать в Bootstrap 5 колонок

Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее

Многоуровневое меню CSS

Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее

Блочная Flexbox верстка на примерах

Flexbox - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее

Hover эффекты CSS

Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее

Препроцессор LESS. Как установить и использовать

LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее

Всплывающее окно при закрытии страницы

Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее

Использование функции CSS calc()

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее

Добавить комментарий