Können CSS3-Übergänge beim Laden der Seite ohne JavaScript animiert werden?

Können CSS3-Übergangsanimationen beim Laden der Seite ohne JavaScript ausgeführt werden?

Es ist tatsächlich möglich, CSS3-Übergangsanimationen beim Laden der Seite zu initiieren, ohne dass JavaScript erforderlich ist . Die Lösung liegt in der Verwendung von CSS3-Keyframes.

Implementieren einer gleitenden Animation mit CSS3-Keyframes

Lassen Sie uns zeigen, wie Sie CSS3-Keyframes verwenden, um ein Navigationsmenü zu erstellen, das auf der Seite in die Ansicht verschoben wird Laden:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* Invoking the 'slideInFromLeft' animation */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Aesthetic enhancements */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Beim Laden der Seite wird das Navigationsmenü reibungslos angezeigt von der linken Seite. Dieser Effekt wird ausschließlich durch CSS3 erreicht und erfordert keinen JavaScript-Eingriff.

Das obige ist der detaillierte Inhalt vonKönnen CSS3-Übergänge beim Laden der Seite ohne JavaScript animiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!