Bolehkah Peralihan CSS3 Bernyawa pada Halaman Dimuatkan Tanpa JavaScript?

Bolehkah Animasi Peralihan CSS3 Dijalankan pada Halaman Dimuatkan Tanpa JavaScript?

Memang mungkin untuk memulakan animasi peralihan CSS3 apabila halaman dimuatkan tanpa memerlukan JavaScript . Penyelesaiannya terletak pada penggunaan Kerangka Kunci CSS3.

Melaksanakan Animasi Gelongsor dengan Kerangka Kunci CSS3

Mari kita tunjukkan cara menggunakan Kerangka Kunci CSS3 untuk mencapai menu navigasi yang meluncur ke paparan atas halaman muatkan:

@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>

Pada halaman dimuatkan, menu navigasi akan meluncur dengan lancar ke paparan dari sebelah kiri. Kesan ini dicapai semata-mata melalui CSS3 dan tidak memerlukan campur tangan JavaScript.

Atas ialah kandungan terperinci Bolehkah Peralihan CSS3 Bernyawa pada Halaman Dimuatkan Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!