Что такое переходы CSS и как их использовать

Опубликовано: 2022-02-16

В предыдущей статье вы узнали об основных понятиях CSS-анимации и о том, как их использовать. Можно сказать, что переходы — это упрощенная форма анимации с некоторыми различиями между ними, причем форма запуска анимации является наиболее подходящей.

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

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

Давайте начнем!

Шаг 1. - Предлагаемый макет

CSS-переходы и как их использовать

У нас есть 4 карты, рекламирующие обычные услуги веб-агентства. При наведении на них каждый из элементов внутри карты будет иметь различный переход для достижения желаемого эффекта.

Шаг № 2. - HTML

  • Откройте предпочитаемый редактор кода
  • Создайте файл HTML с именем index.html .
  • Скопируйте и вставьте этот код:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
ОТКРЫТЬ В ПОПАПЕ
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 css-переходы 001

Сервис-карта-контейнер имеет 4 разные карты. Каждая карточка состоит из значка, заголовка, некоторого текста и ссылки на соответствующую информацию на сайте. Текст и ссылка будут отображаться при наведении курсора на карточку, в противном случае они будут скрыты.

Шаг 3. - Основные стили CSS

  • Создайте файл CSS и назовите его style.css — в HTML-коде уже есть ссылка на этот файл и на Google Fonts.
  • Скопируйте и вставьте эти стили, чтобы изменить стили оформления и цвет фона карточек:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
ОТКРЫТЬ В ПОПАПЕ
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 css-переходы 002

Шаг №4. - Стили макета

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

  • Отредактируйте код CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Контейнер карты услуги представляет собой горизонтальную сетку с 4 столбцами. Каждая карта была объявлена ​​также как контейнер сетки с 2 строками. Обратите внимание, что мы объявили фиксированную высоту для каждой карты.

191125 css-переходы 003

Шаг № 5. - Спрайт изображения

Согласно W3Schools, спрайт изображения представляет собой набор изображений, объединенных в одно изображение. Вы экономите пропускную способность, поскольку странице не нужно будет запрашивать сервер для каждого загружаемого изображения. Он запросит изображение один раз, а затем вы сопоставите необходимую часть изображения в коде CSS.

191125 css-переходы 004

Изображение имеет ширину 240 пикселей и высоту 480 пикселей. Каждая из иконок занимает площадь 120x120px. Чтобы сопоставить каждое из изображений, мы начинаем с верхнего левого угла изображения с координатами (0px 0px) — следуя порядку «слева — сверху».

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

  • 0 пикселей 0 пикселей
  • 0px -120px
  • 0px -240px
  • 0px -360px

Это изображения, которые будут использоваться перед наведением.

Изображения в правом столбце спрайта расположены по адресу:

  • 120 пикселей 0 пикселей
  • 120 пикселей -120 пикселей
  • 120 - 240 пикселей
  • 120 пикселей -360 пикселей
  • Отредактируйте код CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
ОТКРЫТЬ В ПОПАПЕ
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

Контейнер карты услуги представляет собой горизонтальную сетку с 4 столбцами. Каждая карта была объявлена ​​также как контейнер сетки с 2 строками. Обратите внимание, что мы объявили фиксированную высоту для каждой карты.

191125 css-переходы 003

Шаг № 5. - Спрайт изображения

Согласно W3Schools, спрайт изображения представляет собой набор изображений, объединенных в одно изображение. Вы экономите пропускную способность, поскольку странице не нужно будет запрашивать сервер для каждого загружаемого изображения. Он запросит изображение один раз, а затем вы сопоставите необходимую часть изображения в коде CSS.

191125 css-переходы 004

Изображение имеет ширину 240 пикселей и высоту 480 пикселей. Каждая из иконок занимает площадь 120x120px. Чтобы сопоставить каждое из изображений, мы начинаем с верхнего левого угла изображения с координатами (0px 0px) — следуя порядку «слева — сверху».

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

  • 0 пикселей 0 пикселей
  • 0px -120px
  • 0px -240px
  • 0px -360px

Это изображения, которые будут использоваться перед наведением.

Изображения в правом столбце спрайта расположены по адресу:

  • 120 пикселей 0 пикселей
  • 120 пикселей -120 пикселей
  • 120 - 240 пикселей
  • 120 пикселей -360 пикселей
  • Отредактируйте код CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 css-переходы 005

Неплохо, правда? Давайте добавим некоторые косметические штрихи, чтобы закончить эту часть с некоторыми отступами.

  • Отредактируйте код CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
ОТКРЫТЬ В ПОПАПЕ
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 css переходы 006

Шаг №6. - CSS-переходы

Свойство перехода CSS имеет 4 разных дочерних свойства:

  • transition-property (свойство элемента, к которому будет применяться переход)
  • Продолжительность перехода
  • временная функция перехода
  • задержка перехода

Сокращение:

переход: [свойство перехода] [продолжительность перехода] [функция времени перехода] [задержка перехода]

  • Отредактируйте код CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Как вы можете заметить, можно применять несколько переходов к разным свойствам элемента, разделяя их запятой. Ни один из этих переходов не имеет задержки.

Чтобы карта катилась вверх, вы устанавливаете отрицательное поле сверху и добавляете абсолютное значение этого поля к высоте элемента (320px == 20em).

191125 css переходы 008

Пришло время нацелиться на изображения и заставить их меняться с помощью перехода.

  • Отредактируйте код CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Снова:

  • свойство перехода: фон
  • продолжительность перехода: 0,4 с
  • функция времени перехода: шаг-конец

Остальное просто сопоставляется с точной координатой (подробно описанной выше) на спрайте изображения.

191125 css переходы 009

Наконец, давайте нацелимся на контейнер .hidden.

  • Отредактируйте код CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Здесь нужно обратить внимание на две детали:

  • Переход по цвету текста имеет задержку перехода 0,2 с.
  • Свойство высоты элемента изменяется при наведении без перехода 
191125 css переходы 010

Переходы поддерживаются всеми основными браузерами.

191125 css переходы 011

Надеюсь, вам понравилось это упражнение. Спасибо за чтение!

Код можно найти здесь.