Bagaimanakah Saya Boleh Menghidupkan Peralihan CSS3 pada Muatan Halaman Tanpa JavaScript?

Animasi Peralihan CSS3 pada Muatan Halaman Tanpa JavaScript

Bolehkah anda menggunakan animasi peralihan CSS3 pada halaman web semasa memuatkan tanpa menggunakan JavaScript?

Soalan ini telah membingungkan ramai pembangun web, kerana pilihan yang ada muncul terhad:

• Lengah peralihan CSS3 menawarkan kawalan ke atas kelewatan kesan pada elemen, tetapi ia hanya terpakai untuk acara tuding.
• CSS3 Kerangka kunci memang berfungsi pada pemuatan halaman, tetapi kelajuan pelaksanaannya terlalu perlahan untuk praktikal gunakan.
• Standard Peralihan CSS3 cukup pantas tetapi tidak mencetuskan animasi pada pemuatan halaman.

Penyelesaian: Kerangka Kunci CSS3

Jangan takut, kerana menggunakan CSS3 Keyframes menyediakan penyelesaian yang berdaya maju untuk mencapai animasi pada beban halaman. Mari kita teliti contoh yang menyeluruh:

Animasi Slaid Masuk Menu Navigasi

Dengan menggunakan Kerangka Kunci CSS3 semata-mata, kami boleh mencipta menu navigasi yang meluncur ke paparan apabila halaman dimuatkan:

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

header {
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 30px;
}

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

Dalam kod ini, peraturan @keyframes mentakrifkan animasi slideInFromLeft, yang mengalihkan elemen pengepala daripada 100% di luar skrin ke kedudukan normalnya. Animasi digunakan pada elemen pengepala menggunakan sifat animasi, dengan nilai yang sesuai untuk tempoh, fungsi pemasaan dan kiraan lelaran.

Dengan menggunakan Kerangka Kunci CSS3, kami telah berjaya melaksanakan animasi CSS sahaja yang dilaksanakan pada halaman memuatkan, memberikan pengalaman pengguna yang lancar dan menarik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Peralihan CSS3 pada Muatan Halaman Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!