Ключевые кадры и анимация в CSS. Свойства анимации. 3D трансформации. Сдвиг и перспектива

А читатели моего telegram - канала узнают все новости и полезности самыми первыми.

Продолжаем постигать всеми любимый CSS и его возможности. Я постигаю его вместе с вами, а написание статьи хорошо закрепляет изученный материал.

Итак, анимация в CSS позволяет элементу постепенно измениться с одного стиля к другому. Вы можете изменять множество CSS свойств столько раз, сколько вы хотите. Ключевые кадры содержат стили, которые будут иметь элементы в определенное время
При определении стилей CSS внутри правила @keyframes, анимация постепенно изменится от текущего стиля к новому стилю в определенное время.
Чтобы получить работающую анимацию, вам необходимо связать анимацию с элементом.

Ключевые кадры содержат стили, которые будут иметь элементы в определенное время. В примере ниже, анимация длится 3 секунды и изменяет зеленый фоновый цвет класса animation на красный и голубой три раза: когда анимация выполнена на 50%, на 70%, и когда анимация будет выполнена на 100%.

<style>
.animation {
  width: 100px;
  height: 100px;
  background-color: rgb(5, 136, 75);
  animation-name: color;
  animation-duration: 3s;
}
@keyframes color {
0% {
  background-color: rgb(5, 136, 75);
}

50% {
  background-color: rgb(187, 60, 56);
}

100% {
  background-color: rgb(0, 145, 255);
}
 }
</style>

<body>
  <div class="animation"></div>
</body>

color это название анимации. Вы можете использовать любое имя для вашей анимации. Вставьте этот код в свой редактор и поэксперементируйте с цветами и временем.

В качестве альтернативы использования процентов, вы можете использовать ключевые слова from и to , где:
from это значение начинающееся с 0%
to это значение заканчивающееся на 100%.
Например, оба примера выводят один и тот же результат:

@keyframes color {
0% {
  background-color: rgb(5, 136, 75);
}
50% {
  background-color: rgb(187, 60, 56);
}

Или:

@keyframes color {
from {
  background-color: rgb(5, 136, 75);
}
to {
  background-color: rgb(187, 60, 56);
}

Чтобы анимация работала, вам необходимо связать анимацию с элементом.

Теперь перейдем к изучению свойств animation.

animation-name определяет какую анимацию использовать.

animation-name: color;

Свойство animation-duration определяет длительность выбранных анимаций в секундах.

animation-duration: 3s;

Если свойство animation-duration не было определено, то анимация не будет воспроизведена, потому что значением по умолчанию длительности является 0.

animation-delay - определяет задержку до начала анимации.

Значения animation-delay и animation-duration могут быть определены в секундах (s) или миллисекундах (ms).

animation-timing-function определяет кривую скорости анимации. Может иметь следующие значения:ease - анимация начинается медленно, затем быстро, затем медленно заканчивается (по умолчанию), linear - анимация с одинаковой скоростью от начала и до конца, ease-in - анимация с медленным началом, ease-out - анимация с медленным концом, ease-in-out - анимация с медленным началом и концом, cubic-bezier(n,n,n,n) - позволяет вам определять собственные значения в функции cubic-bezier.

Свойство animation-iteration-count определяет количество повторов анимации. Infinity - бесконечно количество раз. Если вы используете 0 или отрицательное число для animation-iteration-count, то анимация никогда не начнется.

animation-direction указывает, как ключевой кадр должен быть применен. Значениями могут быть: normal - значение по умолчанию, что значит, что оно выполняется от 0 % до 100%. reverse - анимация выполняется в обратном направлении от 100 % до 0%. alternate - анимация выполняется вперед, затем обратно, затем снова вперед. alternate reverse - анимация сначала выполняется в обратном направлении, затем вперед, затем снова в обратном направлении.

Разберем как можно сократить код, посмотрите пример ниже:

div {
  animation-name: color;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

А теперь сокращаем:

div {
  animation: color  3s ease-in 2s infinite normal;
}

3D трансформации.
Вместе с осями x и y, 3D Трансформация представляет ось-Z, которая позволяет 3D манипуляции.

3D Трансформация похожа на 2D Трансформацию:rotateX(), rotateY() и rotateZ() вращают элемент в 3-х мерном пространстве вокруг соответствующих осей и с заданным градусом.

div.X {
  transform: rotateX(150deg);
}
div.Y {
  transform: rotateY(150deg);
}
div.Z {
  transform: rotateZ(150deg);
}

Вы можете выключить все трансформации, примененные к элементу, используя функцию none: transform: none;

Сдвиг.

Методы 3D сдвига позволяют вам передвигать элементы горизонтально (translateX), вертикально (translateY) и к или от экрана (translateZ), используя любые единицы длины (px, em, %, и т.д.). Положительные значения сдвигают элемент к зрителю, а отрицательные – от него.

#box {
 transform: translateX(30px)
            translateY(4em)
            translateZ(-12px);
}

Скопируйте и посмотрите код на практике, чтобы сравнить результат до сдвига и после сдвига.

Метод translate3d() позволяет вам передавать значения x, y, и z, все за один раз, следующим образом:

#box {
  transform: translate3d(-22px, 4em, 10px);
}

Также, как и в методе translate3d(), существуют также scale3d() и rotate3d(), которые применяются для масштабирования и вращения элементов в 3D.

Сдвиг элемента похож на косвенное позиционирование - он не влияет на поток документа. Сдвинутый элемент оставит свое положение в потоке и появится только для перемещения.

Перспектива.

Перспектива определяет глубину воспроизведения 3D сцены. Представляйте себе перспективу, как расстояние от зрителя до объекта. Чем больше значение, тем больше расстояние и меньше интенсивность визуального эффекта. При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.

div.yellow {
  perspective: 100px;
}
div.red {
  transform: rotateX(45deg);
}

Свойство perspective влияет только на трансформированные 3D элементы.

Испытывайте эти свойства на практике, внедряйте в свои проекты, чтобы оживить их. Также мы можем реализовать анимации через JavaScript, что я и планирую изучать дальше и делиться полученными знаниями с Вами.

#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend