Animationen und Übergänge

Einführung

In der hektischen Welt von "Pet's House", einem virtuellen Heiligtum für Tierliebhaber, beginnt Taylor, ein kreativer Webdesigner, eine Reise, um Leben in die Website zu bringen.

Dieses Lab verwendet CSS-Animationen und -Übergänge, um die Benutzererfahrung zu verbessern und die Website informativ, ansprechend und dynamisch zu gestalten. Taylor möchte statische Elemente in interaktive Funktionen verwandeln, die Besucher fesseln und sie auf eine unvergessliche Reise durch die digitale Welt der Tierpflege führen.

Skills Graph

Pseudoelement

In der Navigationsleiste auf der Pet-Seite erscheint beim Hovern über einen Navigationspunkt ein Unterstrich für diesen Navigationspunkt.

Sollten wir uns überlegen, wie dieser Effekt erreicht wird, das Anzeigen und das Verbergen?

CSS's ::after-Pseudoelement ist ein leistungsstarkes Tool, das es Entwicklern ermöglicht, zusätzlichen Inhalt oder Dekorationen hinter dem Inhalt eines ausgewählten Elements einzufügen. Diese Methode kann für eine Vielzahl von Design- und Layoutaufgaben verwendet werden, wie das Hinzufügen dekorativer Elemente, das Erstellen klarer Layouttrennungen oder das Einfügen von Inhalten ohne die HTML-Struktur zu verändern. Hier ist ein Tutorial zum Verwenden des CSS-::after-Pseudoelements.

::after ist ein Pseudoelement, das es Ihnen ermöglicht, zusätzlichen Inhalt am Ende des Inhalts eines Elements einzufügen. Dieser Inhalt ist standardmäßig ein Inline-Element.

selector::after {
  /* CSS-Eigenschaften */
}

Verwenden Sie die content-Eigenschaft, um den einzufügenden Inhalt anzugeben. Dies kann Text, Bilder oder andere CSS-Eigenschaften sein.

Beispielsweise fügen Sie ein rotes Herz hinter das <p>-Element hinzu:

Wir können einen Unterstrich-Effekt mit ::after implementieren, indem wir Folgendes der CSS hinzufügen:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

Derzeit hat sich nichts auf der Seite geändert, da die Breite 0 beträgt. Als Nächstes verwenden wir :hover, um den Unterstrich-Effekt zu erreichen, indem wir die Breite auf 100% ändern, wenn der Mauszeiger über dem Element hapert.

Pseudoklasse

Der CSS-:hover-Pseudoklassen-Selektor wird verwendet, um Elemente auszuwählen, über denen der Mauszeiger hapert. Dadurch können Entwickler visuelle Rückmeldungen für Benutzereingaben bereitstellen, wie zum Beispiel das Ändern von Farben, Größen oder das Hinzufügen von Animationen, was die Benutzererfahrung verbessert.

selector:hover {
  /* CSS-Eigenschaften */
}

Beispielsweise können Sie die Farbe eines <button>-Elements ändern, wenn der Mauszeiger darüber hapert, indem Sie die folgende CSS verwenden:

Jetzt, da wir wissen, wie :hover verwendet wird, können wir Folgendes zu style.css hinzufügen:

.navigation li:hover::after {
  width: 100%;
}

Bis zu diesem Punkt wurde erreicht, dass beim Hovern über den Navigationspunkten ein Unterstrich-Effekt erscheint. Allerdings können aufmerksame Studenten feststellen, dass der Effekt des auftauchenden Effekts der nach unten gleitenden Linie einen glatteren Effekt hat. Hierfür wird Ihnen ein weiteres CSS-Attribut vorgestellt.

Transition

CSS-Übergänge ermöglichen es Ihnen, einen Effekt hinzuzufügen, wenn Sie von einem Stil zu einem anderen wechseln, ohne Flash-Animationen oder JavaScript zu verwenden. Sie können die Dauer des Übergangs sowie die Art des Übergangs über Zeitfunktionen angeben.

Die CSS-transition-Eigenschaft ist eine Kurzschreibweise für vier Übergangsbezogene Eigenschaften:

• transition-property: Gibt den Namen der CSS-Eigenschaft an, für die der Übergangseffekt gilt.
• transition-duration: Definiert die Dauer des Übergangs.
• transition-timing-function: Beschreibt, wie der Übergang über seine Dauer ablaufen wird.
• transition-delay: Gibt eine Verzögerung an, bevor der Übergang beginnt.

Beispielsweise definiert der folgende CSS-Code einen Übergangseffekt, der die Hintergrundfarbe eines Elements von Aqua zu rgb(145, 255, 0) innerhalb von 1 Sekunde ändert:

Jetzt, da wir wissen, wie transition verwendet wird, können wir Folgendes zu style.css hinzufügen:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Opazität

Wenn Sie die Maus über das Bild im Anzeigebereich bewegen, wird das Bild transparenter und darunter wird Text erscheinen.

Die CSS-opacity-Eigenschaft wird verwendet, um das Opazitätsniveau eines Elements festzulegen. Mit dieser Eigenschaft können Sie die Transparenz eines Elements und seiner Kinder steuern, sodass das Element vollständig transparent, vollständig undurchsichtig oder jedes Opazitätsniveau dazwischen ist. Die Opazitätswerte reichen von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Diese Eigenschaft ist sehr nützlich zum Erstellen von Ausblendeffekten, zum Betonen interaktiver Elemente oder zum Entwerfen von Schnittstellen mit einem Tiefeneffekt.

selector {
  opacity: value; /* Werte reichen von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) */
}

Jetzt, da wir wissen, wie opacity verwendet wird, können wir Folgendes zu style.css hinzufügen:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

Der Effekt der erhöhten Transparenz ist erreicht. Als Nächstes fügen wir etwas Glätte zur Interaktion hinzu.

Transform

Die CSS-Transform-Eigenschaft ermöglicht es Ihnen, ein Element zu rotieren, zu skalieren, zu verzerren oder zu verschieben, wodurch die Form und die Position des Elements geändert werden, ohne die Layoutierung der Seite zu beeinflussen. Dies ist ein leistungsstarkes Tool zum Erstellen dynamischer visuelle Effekte und komplexer Animationen.

Die Transform-Eigenschaft umfasst die folgenden Funktionen:

• rotate(): Rotiert ein Element, wobei der Parameter der Rotationswinkel ist (z.B. rotate(45deg) für eine 45-Grad-Rotation).
• scale(): Skaliert ein Element, wobei der Parameter der Skalenfaktor ist (z.B. scale(2) für eine Verdoppelung der Größe).
• translate(): Verschiebt ein Element, wobei die Parameter die Entfernungen sind, um die es sich entlang der X-Achse und Y-Achse bewegt (z.B. translate(50px, 100px) für eine Bewegung von 50px nach rechts und 100px nach unten).
• skew(): Verzerrt ein Element, wobei die Parameter die Verzerrungswinkel entlang der X-Achse und Y-Achse sind (z.B. skew(30deg, 20deg) für eine 30-Grad-Verzerrung entlang der X-Achse und eine 20-Grad-Verzerrung entlang der Y-Achse).

Beispielsweise verschiebt das <p>-Element um 100 Pixel nach rechts auf der x-Achse.

Jetzt, da wir wissen, wie transform verwendet wird, können wir Folgendes zu style.css hinzufügen:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index

Die CSS-z-index-Eigenschaft steuert die vertikale Stapelfolge von Elementen auf einer Seite. Wenn Elemente überlappen, bestimmt z-index, welches Element oben erscheinen soll. Es kann nur auf positionierte Elemente angewendet werden, d.h. auf solche mit einem Wert des position-Attributs von relative, absolute, fixed oder sticky. Der Wert von z-index kann positiv, negativ oder 0 sein, wobei höhere Werte bedeuten, dass das Element über Elementen mit niedrigeren Werten platziert wird.

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

Beispielsweise nehmen wir an, dass es zwei überlappende Elemente gibt. Wir können z-index verwenden, um zu steuern, welches Element oben erscheint:

Jetzt, da wir wissen, wie z-index verwendet wird, können wir Folgendes zu style.css hinzufügen:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Implementierung von Keyframe-Animationen

Wenn wir die Website betreten, gibt es eine Fade-in-Animation auf der Willkommensseite.

CSS-Animationen sind ein leistungsstarkes Tool, das es Entwicklern ermöglicht, animierte Effekte für Webseitelemente zu erstellen, ohne JavaScript zu verwenden. Mit CSS-Animationen können Sie eine Sequenz von Animationen definieren, die ein Element von einem Stilzustand in einen anderen überführen.

CSS-Animationen beruhen hauptsächlich auf zwei Schlüsselteilen: der @keyframes-Regel und den Animationseigenschaften.

• @keyframes-Regel: Definiert die Keyframes in der Animationssequenz. Jede Keyframe beschreibt den Stil der Animation zu einem bestimmten Zeitpunkt.
• animation-Eigenschaften: Wenden die definierte @keyframes auf einen Selektoren an und legen die Dauer, die Verzögerung, die Wiederholungszahl und mehr für die Animation fest.

Beispielsweise:

Jetzt, da wir wissen, wie Animationen verwendet werden, können wir Folgendes zu style.css hinzufügen:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature.cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

Zusammenfassung

In diesem Lab hat Taylor erfolgreich CSS-Animationen und -Übergänge auf die Website "Pet's House" angewendet und eine lebendige und interaktive Benutzererfahrung geschaffen. Die Reise von statischen Seiten zu dynamischen Interaktionen demonstriert die Macht subtiler visuelle Hinweise bei der Verbesserung der Website-Navigation und -Beteiligung. Durch Animationen und Übergänge hat Taylor den digitalen Raum von "Pet's House" für jeden Besucher einladender und unvergesslicher gemacht.