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.
Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием 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 - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее
Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее
LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Добавить комментарий