Czym są przejścia CSS i jak z nich korzystać

Opublikowany: 2022-02-16

W poprzednim artykule poznałeś podstawowe pojęcia związane z animacją CSS i jak z nich korzystać. Można powiedzieć, że przejścia to uproszczona forma animacji z pewnymi różnicami między nimi, przy czym najbardziej odpowiednia jest forma wyzwalania animacji.

Inną różnicą jest to, że przejścia mają tylko dwa stany (początkowy i końcowy), podczas gdy możesz zdefiniować wiele stanów animowanego elementu za pomocą reguły @keyframes . Przejścia są wyzwalane po akcji, na przykład po najechaniu kursorem na element, ale animacje mogą wystąpić bez określonej akcji, na przykład z opóźnieniem animacji po wczytaniu strony.

W tym samouczku nauczymy się podstawowych pojęć CSS Transitions na praktycznym przykładzie. Dodatkowo dowiesz się również, jak korzystać z obrazka w CSS.

Zaczynajmy!

Krok 1. - Proponowany układ

Przejścia CSS i jak ich używać

Posiadamy 4 karty promujące regularne usługi agencji internetowej. Po najechaniu na nie każdy element wewnątrz karty będzie miał inne przejście, aby osiągnąć pożądany efekt.

Krok nr 2. - HTML

  • Otwórz preferowany edytor kodu
  • Utwórz plik HTML o nazwie index.html
  • Skopiuj i wklej ten kod:
 <!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>
OTWÓRZ W WYSKAKUJĄCYM
 <!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 przejść CSS 001

Pojemnik na karty serwisowe zawiera 4 różne karty. Każda karta składa się z ikony, tytułu, tekstu i łącza do odpowiednich informacji na stronie. Tekst i link zostaną wyświetlone po najechaniu kursorem na kartę, w przeciwnym razie zostaną ukryte.

Krok 3. - Podstawowe style CSS

  • Utwórz plik CSS i nazwij go style.css — w kodzie HTML jest już link do tego pliku i do Google Fonts
  • Skopiuj i wklej te style, aby zmienić style typografii i kolor tła kart:
 /* 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;
 }
OTWÓRZ W WYSKAKUJĄCYM
 /* 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 przejść CSS 002

Krok 4. - Style układu

Użyjmy CSS Grid, aby utworzyć karty i ułożyć je poziomo.

  • Edytuj kod 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;
 }

Kontener kart serwisowych to pozioma siatka z 4 kolumnami. Każda karta została zadeklarowana również jako pojemnik grid z 2 rzędami. Zauważ, że dla każdej karty zadeklarowaliśmy stałą wysokość.

191125 przejść CSS 003

Krok #5. - Sprite obrazu

Według W3Schools obrazek to zbiór obrazów umieszczonych w jednym obrazie. Oszczędzasz przepustowość, ponieważ strona nie będzie musiała wysyłać żądania serwera dla każdego obrazu, który ma załadować. Raz zażąda obrazu, a następnie zmapujesz wymaganą część obrazu w kodzie CSS.

191125 przejść CSS 004

Obraz ma 240 pikseli szerokości i 480 pikseli wysokości. Każda z ikon zajmuje obszar 120x120px. Aby zmapować każdy z obrazów, zaczynamy od lewego górnego rogu obrazu ze współrzędnymi (0px 0px) — zgodnie z kolejnością „lewo – góra”.

W ten sposób obrazy w lewej kolumnie duszka znajdują się pod adresem:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Są to obrazy, których należy użyć przed najechaniem kursorem.

Obrazy w prawej kolumnie duszka znajdują się pod adresem:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edytuj kod 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;
 }
OTWÓRZ W WYSKAKUJĄCYM
 /* 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;
 }

Kontener kart serwisowych to pozioma siatka z 4 kolumnami. Każda karta została zadeklarowana również jako pojemnik grid z 2 rzędami. Zauważ, że dla każdej karty zadeklarowaliśmy stałą wysokość.

191125 przejść CSS 003

Krok #5. - Sprite obrazu

Według W3Schools obrazek to zbiór obrazów umieszczonych w jednym obrazie. Oszczędzasz przepustowość, ponieważ strona nie będzie musiała wysyłać żądania serwera dla każdego obrazu, który ma załadować. Raz zażąda obrazu, a następnie zmapujesz wymaganą część obrazu w kodzie CSS.

191125 przejść CSS 004

Obraz ma 240 pikseli szerokości i 480 pikseli wysokości. Każda z ikon zajmuje obszar 120x120px. Aby zmapować każdy z obrazów, zaczynamy od lewego górnego rogu obrazu ze współrzędnymi (0px 0px) — zgodnie z kolejnością „lewo – góra”.

W ten sposób obrazy w lewej kolumnie duszka znajdują się pod adresem:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Są to obrazy, których należy użyć przed najechaniem kursorem.

Obrazy w prawej kolumnie duszka znajdują się pod adresem:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edytuj kod 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 przejść CSS 005

Nieźle, prawda? Dodajmy trochę kosmetycznego akcentu, aby zakończyć tę część z odrobiną wyściółki.

  • Edytuj kod 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;
 }
OTWÓRZ W WYSKAKUJĄCYM
 .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 przejść CSS 006

Krok 6. - Przejścia CSS

Właściwość przejścia CSS ma 4 różne właściwości podrzędne:

  • transition-property (właściwość elementu, do którego zostanie zastosowane przejście)
  • okres przejściowy
  • funkcja czasu przejściowego
  • przejście-opóźnienie

Skrót to:

przejście: [właściwość-przejścia] [czas-przejścia] [funkcja czasu-przejścia] [opóźnienie-przejścia]

  • Edytuj kod 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;
 }


Jak widać, możliwe jest zastosowanie wielu przejść do różnych właściwości elementów, oddzielając je przecinkiem. Żadne z tych przejść nie ma opóźnienia.

Aby karta toczyła się w górę ustawiasz ujemny margines na górze i dodajesz wartość bezwzględną tego marginesu do wysokości elementu (320px == 20em).

191125 przejść CSS 008

Nadszedł czas, aby skierować obrazy i zmienić je za pomocą przejścia.

  • Edytuj kod 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;
 }

Jeszcze raz:

  • właściwość przejściowa: tło
  • czas przejścia: 0,4s
  • funkcja czasu przejścia: step-end

Reszta to po prostu mapowanie na dokładne współrzędne (szczegóły powyżej) na obrazku.

191125 przejść CSS 009

Na koniec skierujmy się na kontener .hidden .

  • Edytuj kod 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;
 }

Należy zwrócić uwagę na dwa szczegóły:

  • Przejście na kolor tekstu ma opóźnienie przejścia 0,2 s
  • Właściwość wysokości elementu zmienia się po najechaniu kursorem bez przejścia 
191125 przejść css 010

Przejścia są obsługiwane przez wszystkie główne przeglądarki.

191125 przejścia css 011

Mam nadzieję, że podobało Ci się to ćwiczenie. Dziękuje za przeczytanie!

Kod można znaleźć tutaj.