Анимации в CSS
CSS

Анимации в CSS

Опубликовано Автор: Дмитрий Поляков / Нет комментариев
CSS animation

Преобразования

Перемещение

.box {
  width: 300px;
  height: 100px;
  background-color: #f00;
  transform: translate(100px, 100px);
}

transform в данном примере – смещает прямоугольник на 100 px вниз и вправо.

Значения также можно задавать в процентах, будет рассчитываться от размера блока.

также есть функции: translateX и translateY

Масштабирование

.box {
  transform: scale(1.5);
}

Также можно указывать два аргумента, для разного сжатия или растяжения по оси X и по оси Y

.box {
   transform: scale(0.5, 1.5);
 }

Также есть scaleX и scaleY

Также можно указывать отрицательные значения. В этом случае элемент переворачивается.

Вращение

.box {
  transform: rotate(45deg);
}

Этот код поворачивает элемент на 45 градусов по часовой стрелке, отрицательное значение переворачивает против часовой стрелки.

Также можно использовать другие единицы измерения:

1.5turn = 540deg = 600grad = 9.42478rad

Наклон

.box {
  transform: skew(45deg, 0);
}

Также есть: skewX и skew

Множественные преобразования

.box {
  transform: scale(2) translate(100px) rotate(45deg);
}

Задать точку, вокруг которой производится поворот, можно с помощью, transform-origin, задается в процентах, пикселях, и при помощи ключевых слов:

.box {
  transform: rotate(45deg);
  transform-origin: left top; 
}

Также существуют преобразования в трехмерном пространстве.

Также можно преобразовывать при помощи matrix:

.box {
  matrix(2, 0, 0, 1, 0, 0)
}

Где:

  • первое число – Изменение размера по горизонтали
  • второе число – Наклон по горизонтали
  • третье число – Наклон по вертикали
  • четвертое число – Изменение размера по вертикали
  • пятое число – Смещение по горизонтали в пикселах
  • шестое число – Смещение по вертикали в пикселах

Переходы

Должно быть:

  1. Два набора свойств:
    • начальный набор свойств
    • конечный набор свойств
  2. Свойство transition – описание свойств и характеристик анимации перехода
  3. Инициатор – действие, которое вызывает изменение от одного набора свойств к другому (:hover, :target, :focus, :active)

Например, так:

.box {
  width: 300px;
  height: 100px;
  background-color: #f00;
  transition-property: transform;
  transition-duration: .3s;
  
}

.box:hover {
  transform: scale(1.2);
}

При наведении на блок, увеличивается на 20% за 300 ms

Для нескольких свойств:

.box {
  transition-property: transform, background-color;
  transition-duration: .3s, 700ms;

  width: 300px;
  height: 100px;
  background-color: #f00;
}

.box:hover {
  transform: scale(1.2);
  background-color: #ff0;
}

Изменит размер за 300 миллисекунд, цвет за 700 миллисекунд

Для задержки анимации можно использовать transition-delay, например так:

.box {
  transition-property: transform, background-color;
  transition-duration: .3s, 500ms;
  transition-delay: 0s, 0.5s;

  width: 300px;
  height: 100px;
  background-color: #f00;
}

.box:hover {
  transform: scale(1.2);
  background-color: #ff0;
}

Также можно указывать, transition-timing-function, например:

.box {
  transition-property: transform;
  transition-timing-function: linear;
  transition-duration: .3s;

  width: 300px;
  height: 100px;
  background-color: #f00;
}

.box:hover {
  transform: translateX(800px);
}

linear – значит изменение будет проходить линейно

Также есть другие значения, например:

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps(10)
  • steps(10, start)
  • и др.

Также, можно задавать свою временную линию, кривой Бизе, например:

.box {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 3s;

  width: 300px;
  height: 100px;
  background-color: #f00;
}

.box:hover {
  transform: translateX(800px);
}

transition – также можно записывать короткой записью, например:

transition: transform .3s easy-out 1s;

Для нескольких свойств, можно писать через запятую:

transition: transform .3s easy-out, background-color .5s easy-in 1s;

Для анимации всех свойств, можно записать так:

transition: all 1s;

Многоступенчатые анимации

Ключевые кадры

@keyframes show {
  from {
    /*css свойство для первого кадра*/
    opacity: 0;
  }
  to {
    /*css свойство для второго кадра*/
    opacity: 1;
  }
}


.box {
  animation-name: show;
  animation-duration: 2s;

  width: 300px;
  height: 100px;
  background-color: #f00;
}

Или можно так:

@keyframes show {
  to {
    opacity: 1;
  }
}

.box.visible {
  animation-name: show;
  animation-duration: 2s;
}

.box {
  opacity: 0;
  width: 300px;
  height: 100px;
  background-color: #f00;
}

Использование промежуточных кадров:

@keyframes show {
  to {
    opacity: 1;
  }
}

.box.visible {
  animation-name: show;
  animation-duration: 2s;
}

.box {
  opacity: 0;
  width: 300px;
  height: 100px;
  background-color: #f00;
}

Или так:

@keyframes blink {
  0% {
    background-color: darkblue;
  }
  25% {
    background-color: green;
  }
  50% {
    background-color: darkred;
  }
  75% {
    background-color: yellow;
  }
  100% {
    background-color: grey;
  }
}

.box:hover {
  animation-name: blink;
  animation-duration: 3s;
}

.box {
  width: 300px;
  height: 100px;
  background-color: grey;
}

Эффект задержки

  0% {
    background-color: darkblue;
  }
  25%, 75% {
    background-color: green;
  }
  100% {
    background-color: grey;
  }
}

.box:hover {
  animation-name: blink;
  animation-duration: 4s;
}

.box {
  width: 300px;
  height: 100px;
  background-color: grey;
}

Можно устанавливать задержки, при помощи: animation-delay

Также можно использовать функции времени как и в ключевых кадрах, так и для анимации в целом. Как при помощи кривой Бизье, так и при помощи ключевых слов. Задается с помощью: animation-timing-function

Количество повторений задается при помощи: animation-iteration-count

Для бесконечных повторений указываем:

animation-iteration-count: infinite;

Для возвращения к начальному состоянию плавно, можно воспользоваться:

animation-direction: alternate;

Чтобы анимация застыла в конечном состоянии, можно воспользоваться:

animation-fill-mode: forwards;

Также animation можно записывать и короткой записью.

Анимацию можно поставить на паузу, например:

.box:hover {
  animation-play-state: paused;
}

Пример, эффект набора текста и мигающего курсора в CSS

@keyframes typing {
  to {
    width: 15ch;
  }
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

.typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid;
}

.typing.visible {
  animation: typing 4s steps(15) forwards, caret 1s steps(1) infinite;
}

Пример анимация по кругу без вращения предмета:

@keyframes spin {
  0% {
    transform: rotate(0turn)
               translateY(-150px)
               rotate(1turn);
  }
  100% {
    transform: rotate(1turn)
               translateY(-150px)
               rotate(0turn);
  }
}

.box {
  width: 300px;
  height: 100px;
  background-color: #f00;
  animation: spin 4s linear infinite;
}
Дмитрий Поляков

Оставить комментарий