Bagaimana untuk Mencipta Kesan Peralihan Slaid Dalam Menggunakan CSS?

Cara Membuat Peralihan Slaid Masuk dengan CSS

CSS menawarkan beberapa pilihan untuk mencipta peralihan slaid masuk, termasuk peralihan dan animasi CSS3.

Peralihan CSS3

Untuk peralihan, kod yang berkaitan akan kelihatan seperti ini:

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

Dalam contoh ini, kedudukan elemen (#slide) dialihkan dari kiri: -100px kepada 0 dalam tempoh 1 saat apabila tuding di atas elemen induk (.wrapper).

Animasi CSS3

Sebagai alternatif, animasi boleh digunakan untuk mencapai kesan slaid masuk. Berikut ialah contoh:

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

Animasi ini bermula selepas kelewatan 2 saat dan mengekalkan keadaan tamat apabila ia selesai.

Nota: Sokongan penyemak imbas untuk ciri ini boleh disemak [di sini](http://caniuse.com/).

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Peralihan Slaid Dalam Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!