Редакция Highload разобралась, как реализовать анимацию в CSS3 с помощью стилевых анимаций, переходов и трансформаций.
Анимация в CSS — это процесс анимации объектов (элементов) на веб-странице. Ранее анимация реализовывалась с помощью JavaScript, что было довольно сложно. Теперь с помощью встроенных средств CSS оживить страницу можно легко и просто.
Перенос анимации в CSS дает следующие преимущества.
CSS используется три основных вида анимации:
transformation) — изменение размеров, масштаба объектов, их перемещение из одной точки в другую и так далее;transition) — плавная трансформация;keyframes) — изменение анимации (свойство, значение и т.п.) в определенное время или в определенном состоянии.Рассмотрим эти виды анимации и их свойства на примерах. В идеале записаться на специальный курс по фронтенду, например, такой как в школе Mate Academy и Powercode.
Свойство 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(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() вращает элемент по часовой стрелке или против часовой стрелки на указанное количество градусов. Для вращения по часовой стрелке указывают положительное значение, а для вращения против часовой стрелки — отрицательное.
Изменим преобразование в коде страницы:
transform: rotate(10deg);
Курсы наших друзей Hillel, ШАГ и Powercode по фронтенду помогут вам разобраться во всех нюансах процесса. Менторы готовы ответить на любые ваши вопросы.
Метод scaleX() изменяет ширину элемента. Увеличим ширину элемента в полтора раза:
transform: scaleX(1.5);
Метод scaleY() изменяет высоту элемента. Уменьшим высоту элемента в два раза:
transform: scaleY(0.5);
Чтобы уменьшить и ширину, и высоту элемента, используйте метод scale(). Первым аргументом задается множитель для ширины, вторым — для высоты. Уменьшим элемент в два раза:
transform: scale(0.5, 0.5);
Метод skewX() исказит элемент, наклоняя его по оси X:
transform: skewX(15deg);
Метод skewY() исказит элемент, наклоняя его по оси Y:
transform: skewY(15deg);
Метод skew() исказит элемент по обеим осям:
transform: skew(15deg, 15deg);
Метод 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: 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> В примере трехмерной трансформации преобразование происходит плавно. Этот плавный переход достигается за счет свойства transition.
В этой статье мы рассмотрим следующие свойства переходов:
transitiontransition-delaytransition-durationransition-propertytransition-timing-functionДля создания эффекта перехода нужно указать два параметра:
Этот пример кода плавно меняет ширину элемента при наведении курсора:
<!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> Переходы можно применять и к трансформациям. Для этого в качестве изменяемого свойства указывают трансформацию — так же просто, как это делается с шириной и длиной. Допустим, на странице есть элемент div и мы хотим его перевернуть на бок и увеличить в два раза:
div {
width: 100px;
height: 100px;
background: lightgreen;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(90deg);
}
Рассмотрев трансформации и переходы, разберемся собственно в анимации. В этом разделе речь пойдет о таких свойствах:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimationАнимация 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 определяет, сколько будет длиться анимация. Если это свойство не указано, то анимации не будет, потому что для этого свойства используется значение по умолчанию 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, которое принимает те же значения, что и transition-timing-function.
Свойство animation-iteration-count позволяет указать, сколько раз требуется повторять анимацию. По умолчанию анимация выполняется один раз. Чтобы анимация повторялась бесконечно, используется значение infinite.
Свойство animation-direction задает направление анимации. Анимация может воспроизводиться в прямом порядке, в обратном порядке и поочередно в обоих направлениях:
| Значение | Описание |
normal | Значение по умолчанию. Анимация воспроизводится вперед. |
reverse | Анимация воспроизводится в обратном направлении. |
alternate | Анимация воспроизводится сначала вперед, потом назад. |
alternate-reverse | Анимация воспроизводится сначала назад, потом вперед. |
Свойство animation-play-state указывает, приостановлена ли анимация. Значение paused указывает, что анимация приостановлена. Значение running (по умолчанию) означает, что анимация воспроизводится.
Свойство animation-delay задает задержку перед началом воспроизведения анимации. Время задержки можно указать в секундах (s) или миллисекундах (ms). Значение по умолчанию — 0. Можно указать и отрицательное значение. Если используется отрицательное значение, анимация начнется с того момента, как будто она уже воспроизводилась в течение указанного времени.
Свойство 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. |
Рассмотренные свойства поддерживаются, начиная со следующих версий браузеров: Chrome 43.0, IE/Edge 10.0, Firefox 16.0, Safari 9.0, Opera 30.0.
Средства CSS позволяют анимировать HTML-элементы без использования JavaScript и Flash. Анимация поддерживается новыми версиями основных браузеров. Она позволяет менять положение и вид элемента. Встроенные в CSS свойства дают возможность легко оживлять веб-сайты.
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…
