Ключевые кадры и анимация в CSS. Свойства анимации. 3D трансформации. Сдвиг и перспектива
Продолжаем постигать всеми любимый CSS и его возможности. Я постигаю его вместе с вами, а написание статьи хорошо закрепляет изученный материал.
Итак, анимация в CSS позволяет элементу постепенно измениться с одного стиля к другому. Вы можете изменять множество CSS свойств столько раз, сколько вы хотите. Ключевые кадры содержат стили, которые будут иметь элементы в определенное время
При определении стилей CSS внутри правила @keyframes, анимация постепенно изменится от текущего стиля к новому стилю в определенное время.
Чтобы получить работающую анимацию, вам необходимо связать анимацию с элементом.
Ключевые кадры содержат стили, которые будут иметь элементы в определенное время. В примере ниже, анимация длится 3 секунды и изменяет зеленый фоновый цвет класса animation на красный и голубой три раза: когда анимация выполнена на 50%, на 70%, и когда анимация будет выполнена на 100%.
color это название анимации. Вы можете использовать любое имя для вашей анимации. Вставьте этот код в свой редактор и поэксперементируйте с цветами и временем.
В качестве альтернативы использования процентов, вы можете использовать ключевые слова from и to , где:
from это значение начинающееся с 0%
to это значение заканчивающееся на 100%.
Например, оба примера выводят один и тот же результат:
Или:
Чтобы анимация работала, вам необходимо связать анимацию с элементом.
Теперь перейдем к изучению свойств animation.
animation-name определяет какую анимацию использовать.
Свойство animation-duration определяет длительность выбранных анимаций в секундах.
Если свойство 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 - анимация сначала выполняется в обратном направлении, затем вперед, затем снова в обратном направлении.
Разберем как можно сократить код, посмотрите пример ниже:
А теперь сокращаем:
3D трансформации.
Вместе с осями x и y, 3D Трансформация представляет ось-Z, которая позволяет 3D манипуляции.
3D Трансформация похожа на 2D Трансформацию:rotateX(), rotateY() и rotateZ() вращают элемент в 3-х мерном пространстве вокруг соответствующих осей и с заданным градусом.
Вы можете выключить все трансформации, примененные к элементу, используя функцию none: transform: none;
Сдвиг.
Методы 3D сдвига позволяют вам передвигать элементы горизонтально (translateX), вертикально (translateY) и к или от экрана (translateZ), используя любые единицы длины (px, em, %, и т.д.). Положительные значения сдвигают элемент к зрителю, а отрицательные – от него.
Скопируйте и посмотрите код на практике, чтобы сравнить результат до сдвига и после сдвига.
Метод translate3d() позволяет вам передавать значения x, y, и z, все за один раз, следующим образом:
Также, как и в методе translate3d(), существуют также scale3d() и rotate3d(), которые применяются для масштабирования и вращения элементов в 3D.
Сдвиг элемента похож на косвенное позиционирование - он не влияет на поток документа. Сдвинутый элемент оставит свое положение в потоке и появится только для перемещения.
Перспектива.
Перспектива определяет глубину воспроизведения 3D сцены. Представляйте себе перспективу, как расстояние от зрителя до объекта. Чем больше значение, тем больше расстояние и меньше интенсивность визуального эффекта. При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.
Свойство perspective влияет только на трансформированные 3D элементы.
Испытывайте эти свойства на практике, внедряйте в свои проекты, чтобы оживить их. Также мы можем реализовать анимации через JavaScript, что я и планирую изучать дальше и делиться полученными знаниями с Вами.