Теория 26/01/2022

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

Автор, розробник та перекладач

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

Содержание

1. Что такое CSS3-анимация?
2. Преимущества CSS-анимации
3. Виды анимации в CSS3
4. Трансформация в CSS3 (transform)
5. Переходы в CSS3 с помощью transition
6. Сложная анимация на CSS3
7. Поддержка браузерами
Заключение

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	уменьшает размер
`scaleX`	больше 1	увеличивает размер
`skewY`	положительное	сдвиг стороны вверх
`skewY`	отрицательное	сдвиг стороны вниз
`skewX`	положительное	сдвиг стороны влево
`skewX`	отрицательное	сдвиг стороны вправо
`scaleY`	от 0 до 1	уменьшает размер
`scaleY`	больше 1	увеличивает размер
`translateX`	положительное	сдвиг элемента вправо
`translateX`	отрицательное	сдвиг элемента влево
`translateY`	положительное	сдвиг элемента вниз
`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

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

свойство CSS, к которому требуется применить эффект;
длительность эффекта (по умолчанию равна 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.

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

ease — медленное начало, быстрый переход, медленное завершение (по умолчанию);
linear — одинаковая скорость от начала до конца;
ease-in — медленное начало;
ease-out — медленное завершение;
ease-in-out — медленное начало и медленное завершение;
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 свойства дают возможность легко оживлять веб-сайты.

Головна > Теория > CSS3: анимация, переходы и трансформации

8 бесплатных JavaScript-библиотек анимации: работа с текстом, SVG и геометрическими фигурами

Код в движении: 5 лучших библиотек для анимации в React-приложениях

Styled Components — стилизация React-приложений

Сделать сайт интереснее: учимся создавать анимацию в CSS3

Собаки — мое хобби: как я за два месяца создал сайт об уходе за ними и как планирую его монетизировать

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

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

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

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

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

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

Метод translate()

Метод rotate()

Метод scaleX()

Метод scaleY()

Метод scale()

Метод skewX()

Метод skewY()

Метод skew()

Метод matrix()

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

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

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

Transition + transform

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

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

<img decoding="async" class="aligncenter size-full wp-image-178206" src="https://highload.tech/wp-content/uploads/2022/01/image12.gif" alt="CSS3 animation" width="130" height="135" /> Временная функция: свойство animation-timing-function

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

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

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

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

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

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

Заключение

Новости

Как выбрать пароль? Эксперты по кибербезопасности дали 7 рекомендаций

Типы данных в Python: полное руководство

Как создать Телеграм-бота на Python за 30 минут: полное руководство

Ключевое слово yield в Python: как оно работает

Примеры match/case в Python 3.10 с объяснением

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

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

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

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

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

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