Рубріки: Теория

CSS3: анимация, переходы и трансформации

Андрій Денисенко
26.01.2022 18:01

Источник: habr.com

Редакция Highload разобралась, как реализовать анимацию в CSS3 с помощью стилевых анимаций, переходов и трансформаций.

1. Что такое CSS3-анимация?

Анимация в CSS — это процесс анимации объектов (элементов) на веб-странице. Ранее анимация реализовывалась с помощью JavaScript, что было довольно сложно. Теперь с помощью встроенных средств CSS оживить страницу можно легко и просто.

2. Преимущества CSS-анимации

Перенос анимации в CSS дает следующие преимущества.

  • Более высокая производительность, чем в JavaScript. Это обусловлено тем, что браузер оптимизирует анимацию.
  • Простота создания анимации. Анимацию можно создать с помощью встроенных средств CSS, не зная JavaScript.
  • Независимость от браузера. В то время как код JavaScript может давать различные результаты в разных браузерах, анимация CSS гарантирует одинаковые результаты.

3. Виды анимации в CSS3

CSS используется три основных вида анимации:

  • трансформация (transformation) — изменение размеров, масштаба объектов, их перемещение из одной точки в другую и так далее;
  • переход (transition) — плавная трансформация;
  • ключевые кадры (keyframes) — изменение анимации (свойство, значение и т.п.) в определенное время или в определенном состоянии.

Рассмотрим эти виды анимации и их свойства на примерах. В идеале записаться на специальный курс по фронтенду, например, такой как в школе Mate Academy и Powercode.

4. Трансформация в CSS3 (transform)

Свойство transform в CSS позволяет производить двумерные и трехмерные трансформации. Двумерные трансформации дают возможность изменять размер объектов (scale), перемещать их (translate), вращать (rotate) или деформировать их (skew).

Трехмерные добавляют изменение перспективы (perspective) и точки зрения (perspective-origin), стиль вывода вложенных элементов (transform-style) и переключение видимости элемента, когда он расположен тыльной стороной к экрану (backface-visibility).

Двумерные трансформации

Со свойством CSS transform можно использовать следующие методы двумерной трансформации:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Метод translate()

translate(value): перемещение только по оси X.

translate(value, value): перемещение по осям X и Y.

translateX(value): перемещение по оси X.

translateY(value): перемещение по оси Y.

Пример кода для перемещения по обеим осям:

<!DOCTYPE html>
<html>
<head>
<style>
 body {
   padding: 20px 50px;
 }
 #animated {
   width: 100px;
   height: 100px;
   background-color: lightgreen;
   border: 1px solid green;
   opacity: 70%;
 }
 #animated:hover {
   transform: translate(50px, 50px);
 }
</style>
</head>
<body>
   <div id="animated"></div>
</body>
</html>

Вот как translate() работает в браузере.

Метод rotate()

Метод rotate() вращает элемент по часовой стрелке или против часовой стрелки на указанное количество градусов. Для вращения по часовой стрелке указывают положительное значение, а для вращения против часовой стрелки — отрицательное.

Изменим преобразование в коде страницы:

transform: rotate(10deg);

Курсы наших друзей Hillel, ШАГ и Powercode по фронтенду помогут вам разобраться во всех нюансах процесса. Менторы готовы ответить на любые ваши вопросы.

Метод scaleX()

Метод scaleX() изменяет ширину элемента. Увеличим ширину элемента в полтора раза:

transform: scaleX(1.5);

Метод scaleY()

Метод scaleY() изменяет высоту элемента. Уменьшим высоту элемента в два раза:

transform: scaleY(0.5);

Метод scale()

Чтобы уменьшить и ширину, и высоту элемента, используйте метод scale(). Первым аргументом задается множитель для ширины, вторым — для высоты. Уменьшим элемент в два раза:

transform: scale(0.5, 0.5);

Метод skewX()

Метод skewX() исказит элемент, наклоняя его по оси X:

transform: skewX(15deg);

Метод skewY()

Метод skewY() исказит элемент, наклоняя его по оси Y:

transform: skewY(15deg);

Метод skew()

Метод skew() исказит элемент по обеим осям:

transform: skew(15deg, 15deg);

Метод matrix()

Метод matrix() позволяет одновременно задействовать несколько трансформаций. Его параметры таковы: matrix (scaleX, skewY, skewX, scaleY, translateX, translateY). То есть, первый и четвертый параметры масштабируют элемент, второй и третий — искажают, а пятый и шестой — смещают его по соответствующим осям.

Значения параметров задаются следующим образом.

Параметр Значения
scaleX от 0 до 1 уменьшает размер
больше 1 увеличивает размер
skewY положительное сдвиг стороны вверх
отрицательное сдвиг стороны вниз
skewX положительное сдвиг стороны влево
отрицательное сдвиг стороны вправо
scaleY от 0 до 1 уменьшает размер
больше 1 увеличивает размер
translateX положительное сдвиг элемента вправо
отрицательное сдвиг элемента влево
translateY положительное сдвиг элемента вниз
отрицательное сдвиг элемента вверх

В этом примере мы уменьшим элемент, исказим его, имитировав поворот на 45 градусов, и сдвинем, чтобы сохранить отступ на 10 пикселей:

transform: matrix(0.7,0.7,-0.7,0.7,10,10);

Исходная точка трансформации: transform-origin

Можно изменить точку, относительно которой производится трансформация. Для этого используется свойство transform-origin. После определения матрицы добавим в код следующую строку:

transform-origin: 10% 40%;

Теперь трансформация будет производиться со сдвигом:

Трехмерные трансформации

Ниже в таблице приведен список методов трехмерной трансформации с описанием каждого из них.

Функция Описание
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Определяет трехмерную трансформацию с использованием матрицы 4×4 из 16 значений
translate3d(x,y,z) Определяет сдвиг в трехмерном пространстве
translateX(x) Определяет сдвиг в трехмерном пространстве только по оси X
translateY(y) Определяет сдвиг в трехмерном пространстве только по оси Y
translateZ(z) Определяет сдвиг в трехмерном пространстве только по оси Z
scale3d(x,y,z) Определяет изменение масштаба в трех измерениях
scaleX(x) Определяет изменение масштаба в трех измерениях при заданном значении для оси X
scaleY(y) Определяет изменение масштаба в трех измерениях при заданном значении для оси Y
scaleZ(z) Определяет изменение масштаба в трех измерениях при заданном значении для оси Z
rotate3d(x,y,z,angle) Определяет трехмерное вращение
rotateX(angle) Определяет трехмерное вращение по оси X
rotateY(angle) Определяет трехмерное вращение по оси Y
rotateZ(angle) Определяет трехмерное вращение по оси Z
perspective(n) Определяет перспективу для элемента с трехмерным преобразованием

Подробное руководство по трехмерным трансформациям с примерами кода и наглядными иллюстрациями есть в MDN Web Docs (на английском языке).

В этой статье мы не рассматриваем все методы трехмерной трансформации подробно. Зато приводим пример, который может пригодиться на практике, например для создания галереи изображений.

Вот как он работает:

А вот его код:

<!DOCTYPE html>
<html>
<head>
<style>
* {
 box-sizing: border-box;
}
 
body {
 font-size: 16px;
}
 
.wrapper {
 perspective: 1000px;
 margin: 4em auto;
 width: 37em;
}
 
.wrapper:hover .inner {
 transform: rotate(0)
}
 
.inner {
 transition: .3s;
 transform: rotateY(40deg);
}
 
.inner figure {
 box-shadow: -6px 6px 2px -3px  rgba(100,100,100,.1);
 padding: 1em;
 display: inline-block;
}
 
.inner figcaption {
 text-align: center;
 margin: .5em 0;
 font-family: sans-serif;
 font-weight: bold;
}
 
.inner img {
 display: block;
 height: auto;
 max-width: 90px;
 margin: 0 auto;
}
</style>
</head>
<body>
<!-- Вдохновлено примером из статьи https://css-tricks.com/almanac/properties/p/perspective/ -->
<div class="wrapper">
 <div class="inner">
   <figure>
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" alt="HTML5 logo">
     <figcaption>HTML5</figcaption>
   </figure>
   <figure>
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/170px-CSS3_logo_and_wordmark.svg.png" alt="CSS3 logo" width="70px">
     <figcaption>CSS3</figcaption>
   </figure>
   <figure>
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Javascript-shield.svg/170px-Javascript-shield.svg.png" alt="JS logo" width="70px">
     <figcaption>JavaScript</figcaption>
   </figure>
 </div>
</div>
</body>
</html>

5. Переходы в CSS3 с помощью transition

В примере трехмерной трансформации преобразование происходит плавно. Этот плавный переход достигается за счет свойства transition.

В этой статье мы рассмотрим следующие свойства переходов:

  • transition
  • transition-delay
  • transition-duration
  • ransition-property
  • transition-timing-function

Для создания эффекта перехода нужно указать два параметра:

  1. свойство CSS, к которому требуется применить эффект;
  2. длительность эффекта (по умолчанию равна 0, то есть эффект не будет заметен).

Этот пример кода плавно меняет ширину элемента при наведении курсора:

<!DOCTYPE html>
<html>
<head>
<style>
 body {
   padding: 20px 50px;
 }
 #animated {
   width: 100px;
   height: 100px;
   background-color: lightgreen;
   border: 1px solid green;
   opacity: 70%;
   transition: width 2s;
 }
 #animated:hover {
   width: 150px;
 }
</style>
</head>
<body>
   <div id="animated"></div>
</body>
</html>

Можно изменить несколько параметров одновременно. Укажем параметры и время их изменения, разделяя их запятой:

transition: width 2s, height 3s;

Зададим свойства, которые нужно изменить:

width: 150px;
height: 170px;

Получим такой переход:

Вы заметили, что переход начинается плавно, затем выполняется быстрее и замедляется в конце? Это поведение перехода по умолчанию. Его поведение можно менять с помощью свойства transition-timing-function.

Это свойство принимает следующие значения:

  1. ease — медленное начало, быстрый переход, медленное завершение (по умолчанию);
  2. linear — одинаковая скорость от начала до конца;
  3. ease-in — медленное начало;
  4. ease-out — медленное завершение;
  5. ease-in-out — медленное начало и медленное завершение;
  6. cubic-bezier(n,n,n,n) — позволяет указать свои значения для функции кривой Безье. Подробнее об этих функциях можно узнать в MDN Web Docs (на английском языке).

Следующий пример кода, адаптированный с W3Schools, демонстрирует разницу между этими значениями:

<!DOCTYPE html>
<html>
<head>
<style>
div {
 width: 100px;
 height: 30px;
 background: lightgreen;
 transition: width 2s;
 padding: 10px;
}
 
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
 
div:hover {
 width: 300px;
}
</style>
</head>
<body>
 
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
 
</body>
</html>

Transition + transform

Переходы можно применять и к трансформациям. Для этого в качестве изменяемого свойства указывают трансформацию — так же просто, как это делается с шириной и длиной. Допустим, на странице есть элемент div и мы хотим его перевернуть на бок и увеличить в два раза:

div {
 width: 100px;
 height: 100px;
 background: lightgreen;
 transition: width 2s, height 2s, transform 2s;
}
 
div:hover {
 width: 200px;
 height: 200px;
 transform: rotate(90deg);
}

6. Сложная анимация на CSS3

Рассмотрев трансформации и переходы, разберемся собственно в анимации. В этом разделе речь пойдет о таких свойствах:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Анимация CSS3 позволяет постепенно менять стиль элемента. Менять можно любые свойства, любое количество раз.

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

Сначала создается правило @keyframes. В нем определяются ключевые кадры и имя анимации. Затем в описании стиля элемента анимация привязывается к нему по имени (animation-name).

@keyframes green-yellow {
 from {background-color: lightgreen;}
 to {background-color: yellow;}
}
 
div {
 width: 100px;
 height: 100px;
 background-color: lightgreen;
 animation-name: green-yellow;
 animation-duration: 4s;
}

Продолжительность анимации: свойство animation-duration

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

В приведенном выше примере используются ключевые слова from и to. Они соответствуют началу (0%) и концу (100%) анимации. Вместо этих ключевых слов можно указать процентные значения.

Изменим приведенный выше пример, чтобы добавить еще один цвет в середине анимации:

@keyframes red-yellow-green {
 0%   {background-color: red;}
 50%  {background-color: yellow;}
 100% {background-color: green;}
}
 
div {
 width: 100px;
 height: 100px;
 background-color: green;
 animation-name: red-yellow-green;
 animation-duration: 5s;
}


Временная функция: свойство animation-timing-function

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

Повтор анимации: свойство animation-iteration-count

Свойство animation-iteration-count позволяет указать, сколько раз требуется повторять анимацию. По умолчанию анимация выполняется один раз. Чтобы анимация повторялась бесконечно, используется значение infinite.

Направление анимации: свойство animation-direction

Свойство animation-direction задает направление анимации. Анимация может воспроизводиться в прямом порядке, в обратном порядке и поочередно в обоих направлениях:

Значение Описание
normal Значение по умолчанию. Анимация воспроизводится вперед.
reverse Анимация воспроизводится в обратном направлении.
alternate Анимация воспроизводится сначала вперед, потом назад.
alternate-reverse Анимация воспроизводится сначала назад, потом вперед.

Проигрывание анимации: свойство animation-play-state

Свойство animation-play-state указывает, приостановлена ли анимация. Значение paused указывает, что анимация приостановлена. Значение running (по умолчанию) означает, что анимация воспроизводится.

Задержка анимации: свойство animation-delay

Свойство animation-delay задает задержку перед началом воспроизведения анимации. Время задержки можно указать в секундах (s) или миллисекундах (ms). Значение по умолчанию — 0. Можно указать и отрицательное значение. Если используется отрицательное значение, анимация начнется с того момента, как будто она уже воспроизводилась в течение указанного времени.

Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Свойство animation-fill-mode задает стиль элемента, когда анимация не воспроизводится. Анимация в CSS не влияет на элемент перед первым ключевым кадром и после последнего. Свойство animation-fill-mode позволяет переопределить это поведение.

Значение Описание
none Значение по умолчанию. Анимация не применяется к элементу до и после ее воспроизведения.
forwards Стиль элемента останется таким, как в последнем ключевом кадре. Это зависит от animation-direction and animation-iteration-count.
backwards Стиль элемента будет таким, как в первом ключевом кадре. Это зависит от animation-direction and animation-iteration-count. Элемент будет сохранять этот стиль в течение периода задержки.
both Анимация будет следовать правилам для forwards и backwards.

7. Поддержка браузерами

Рассмотренные свойства поддерживаются, начиная со следующих версий браузеров: Chrome 43.0, IE/Edge 10.0, Firefox 16.0, Safari 9.0, Opera 30.0.

Заключение

Средства CSS позволяют анимировать HTML-элементы без использования JavaScript и Flash. Анимация поддерживается новыми версиями основных браузеров. Она позволяет менять положение и вид элемента. Встроенные в CSS свойства дают возможность легко оживлять веб-сайты.

Андрій Денисенко
Теги: CSS3CSS3-анимацияанимация
26.01.2022 18:01

Останні статті

Обучение Power BI – какие онлайн курсы аналитики выбрать

Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…

13.01.2024

Work.ua назвал самые конкурентные вакансии в IТ за 2023 год

В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…

08.12.2023

Украинская IT-рекрутерка создала бесплатный трекер поиска работы

Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…

07.12.2023

Mate academy отправит работников в 10-дневный оплачиваемый отпуск

Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…

07.12.2023

Переписки, фото, история браузера: киевский программист зарабатывал на шпионаже

Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…

07.12.2023

Как вырасти до сеньйора? Девелопер создал популярную подборку на Github

IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…

07.12.2023