Was sind CSS-Übergänge und wie werden sie verwendet?

Veröffentlicht: 2022-02-16

In einem früheren Artikel haben Sie die grundlegenden Konzepte von CSS-Animationen und deren Verwendung kennengelernt. Wir könnten sagen, dass Übergänge eine vereinfachte Form der Animation mit einigen Unterschieden zwischen ihnen sind, wobei die Form des Auslösens der Animation die relevanteste ist.

Ein weiterer Unterschied besteht darin, dass Übergänge nur zwei Zustände haben (Anfangs- und Endzustand), während Sie mit der @keyframes- Regel mehrere Zustände für ein animiertes Element definieren können. Übergänge werden bei einer Aktion ausgelöst, zum Beispiel beim Bewegen der Maus über ein Element, aber Animationen können auch ohne eine bestimmte Aktion auftreten, zum Beispiel mit einer Animationsverzögerung nach dem Laden der Seite.

In diesem Tutorial lernen wir die grundlegenden Konzepte von CSS-Übergängen anhand eines praktischen Beispiels kennen. Außerdem lernen Sie, wie Sie ein Bild-Sprite mit CSS verwenden.

Lasst uns beginnen!

Schritt 1. - Das vorgeschlagene Layout

CSS-Übergänge und wie man sie verwendet

Wir haben 4 Karten, die für die regulären Dienstleistungen einer Webagentur werben. Wenn Sie den Mauszeiger darüber bewegen, hat jedes der Elemente innerhalb der Karte einen anderen Übergang, um den gewünschten Effekt zu erzielen.

Schritt Nr. 2. - Der HTML-Code

  • Öffnen Sie Ihren bevorzugten Code-Editor
  • Erstellen Sie eine HTML-Datei namens index.html
  • Kopieren Sie diesen Code und fügen Sie ihn ein:
 <!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>
IM POPUP ÖFFNEN
 <!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-Übergänge 001

Der Dienstkarten-Container enthält 4 verschiedene Karten. Jede Karte besteht aus einem Symbol, einem Titel, etwas Text und einem Link zu den entsprechenden Informationen auf der Website. Der Text und der Link werden angezeigt, wenn Sie mit der Maus über die Karte fahren, andernfalls werden sie ausgeblendet.

Schritt 3. - Die grundlegenden CSS-Stile

  • Erstellen Sie eine CSS-Datei und nennen Sie sie style.css – im HTML-Code ist bereits ein Link zu dieser Datei und zu Google Fonts
  • Kopieren Sie diese Stile und fügen Sie sie ein, um die Typografiestile und die Hintergrundfarbe der Karten zu ändern:
 /* 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;
 }
IM POPUP ÖFFNEN
 /* 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-Übergänge 002

Schritt 4. - Die Layout-Stile

Lassen Sie uns CSS Grid verwenden, um die Karten zu erstellen und sie horizontal anzuordnen.

  • Bearbeiten Sie den CSS-Code:
 /* 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;
 }

Der Dienstkartenbehälter ist ein horizontales Raster mit 4 Spalten. Jede Karte wurde auch als Gittercontainer mit 2 Reihen deklariert. Beachten Sie, dass wir für jede Karte eine feste Höhe angegeben haben.

191125 CSS-Übergänge 003

Schritt #5. - Der Bildgeist

Laut W3Schools ist ein Bild-Sprite eine Sammlung von Bildern, die in einem einzigen Bild zusammengefasst sind. Sie sparen Bandbreite, da die Seite nicht für jedes zu ladende Bild eine Serveranfrage stellen muss. Es fordert das Bild einmal an, und dann ordnen Sie den erforderlichen Teil des Bildes innerhalb des CSS-Codes zu.

191125 CSS-Übergänge 004

Das Bild ist 240 Pixel breit und 480 Pixel hoch. Jedes der Symbole deckt eine Fläche von 120 x 120 Pixel ab. Um jedes der Bilder zuzuordnen, beginnen wir in der oberen linken Ecke des Bildes mit den Koordinaten (0px 0px) – in der Reihenfolge „links – oben“.

Auf diese Weise befinden sich die Bilder in der linken Spalte des Sprites unter:

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

Dies sind die Bilder, die vor dem Schweben verwendet werden sollen.

Die Bilder in der rechten Spalte des Sprites befinden sich unter:

  • 120px 0px
  • 120px-120px
  • 120px-240px
  • 120px-360px
  • Bearbeiten Sie den CSS-Code:
 .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;
 }
IM POPUP ÖFFNEN
 /* 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;
 }

Der Dienstkartenbehälter ist ein horizontales Raster mit 4 Spalten. Jede Karte wurde auch als Gittercontainer mit 2 Reihen deklariert. Beachten Sie, dass wir für jede Karte eine feste Höhe angegeben haben.

191125 CSS-Übergänge 003

Schritt #5. - Der Bildgeist

Laut W3Schools ist ein Bild-Sprite eine Sammlung von Bildern, die in einem einzigen Bild zusammengefasst sind. Sie sparen Bandbreite, da die Seite nicht für jedes zu ladende Bild eine Serveranfrage stellen muss. Es fordert das Bild einmal an, und dann ordnen Sie den erforderlichen Teil des Bildes innerhalb des CSS-Codes zu.

191125 CSS-Übergänge 004

Das Bild ist 240 Pixel breit und 480 Pixel hoch. Jedes der Symbole deckt eine Fläche von 120 x 120 Pixel ab. Um jedes der Bilder zuzuordnen, beginnen wir in der oberen linken Ecke des Bildes mit den Koordinaten (0px 0px) – in der Reihenfolge „links – oben“.

Auf diese Weise befinden sich die Bilder in der linken Spalte des Sprites unter:

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

Dies sind die Bilder, die vor dem Schweben verwendet werden sollen.

Die Bilder in der rechten Spalte des Sprites befinden sich unter:

  • 120px 0px
  • 120px-120px
  • 120px-240px
  • 120px-360px
  • Bearbeiten Sie den CSS-Code:
 .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-Übergänge 005

Nicht schlecht, oder? Lassen Sie uns etwas kosmetische Note hinzufügen, um diesen Teil mit etwas Polsterung zu beenden.

  • Bearbeiten Sie den CSS-Code:
 .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;
 }
IM POPUP ÖFFNEN
 .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-Übergänge 006

Schritt #6. - Die CSS-Übergänge

Die CSS-Übergangseigenschaft hat 4 verschiedene untergeordnete Eigenschaften:

  • Übergangs-Eigenschaft (die Eigenschaft des Elements, auf das der Übergang angewendet wird)
  • Übergangszeit
  • Übergangs-Timing-Funktion
  • Übergangsverzögerung

Die Kurzform lautet:

Übergang: [Übergangseigenschaft] [Übergangsdauer] [Übergangszeitfunktion] [Übergangsverzögerung]

  • Bearbeiten Sie den CSS-Code:
 /* 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;
 }


Wie Sie sehen können, ist es möglich, mehrere Übergänge auf verschiedene Elementeigenschaften anzuwenden, indem Sie sie durch ein Komma trennen. Keiner dieser Übergänge hat eine Verzögerung.

Damit die Karte nach oben rollt, setzt du oben einen negativen Rand und addierst den absoluten Wert dieses Randes zur Höhe des Elements (320px == 20em).

191125 CSS-Übergänge 008

Es ist jetzt an der Zeit, die Bilder gezielt einzusetzen und sie mit einem Übergang zu verändern.

  • Bearbeiten Sie den CSS-Code:
 .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;
 }

Noch einmal:

  • Übergangseigenschaft: Hintergrund
  • Übergangszeit: 0,4s
  • Übergangs-Timing-Funktion: Schritt-Ende

Der Rest ist nur die Abbildung auf die exakte Koordinate (siehe oben) auf dem Bild-Sprite.

191125 CSS-Übergänge 009

Lassen Sie uns schließlich den .hidden -Container anvisieren.

  • Bearbeiten Sie den CSS-Code:
 .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;
 }

Hier sind zwei Details zu beachten:

  • Der Übergang auf die Farbe des Textes hat eine Übergangsverzögerung von 0,2 s
  • Die Höheneigenschaft des Elements ändert sich beim Hover ohne Übergang 
191125 CSS-Übergänge 010

Übergänge werden von allen gängigen Browsern unterstützt.

191125 CSS-Übergänge 011

Ich hoffe, Ihnen hat diese Übung gefallen. Danke fürs Lesen!

Den Code finden Sie hier.