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

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

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

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

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

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