Apakah perbezaan antara peralihan dan animasi dalam CSS3

Perbezaan antara peralihan dan animasi dalam CSS3: 1. Peralihan CSS memerlukan pencetusan peristiwa, tetapi animasi CSS tidak 2. Peralihan CSS hanya mempunyai satu set (dua) bingkai utama, yang menetapkan permulaan dan penamat tindakan masing-masing. Animasi CSS boleh mentakrifkan berbilang bingkai utama.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

peralihan peralihan

Jadikan perubahan css lebih lancar

Atribut:

Sintaks:

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

Chestnut:

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

Kelebihan peralihan ialah ia mudah dan mudah digunakan, tetapi ia mempunyai beberapa batasan besar.

• Peralihan memerlukan pencetusan peristiwa, jadi ia tidak boleh berlaku secara automatik apabila halaman web dimuatkan.
• Peralihan ialah peristiwa sekali sahaja dan tidak boleh berlaku berulang kali melainkan dicetuskan berulang kali.
• Peralihan hanya boleh mentakrifkan keadaan mula dan keadaan tamat, tetapi bukan keadaan perantaraan.
• Peraturan peralihan hanya boleh mentakrifkan perubahan kepada satu atribut dan tidak boleh melibatkan berbilang atribut.

Animasi CSS telah dicadangkan untuk menyelesaikan masalah ini.

animasi animasi

Kawal setiap langkah animasi dengan mengawal bingkai utama untuk mencapai kesan animasi yang lebih kompleks

Atribut:

Pengeluaran animasi terbahagi kepada dua bahagian:

• Isytihar animasi dengan bingkai utama

• Panggil pengisytiharan bingkai kunci dalam animasi animasi.

@keyframes ialah bingkai utama boleh terdapat banyak bingkai dalam animasi.

Peraturan gaya dalam @keyframes terdiri daripada berbilang peratusan Berbilang peratusan boleh dibuat pada peraturan ini untuk mencapai kesan yang sentiasa berubah.

Chestnut:

<style>
    img{
        width:90px;
        height:90px;
        animation: mychange 1s infinate 1s;
        -webkit-animation: mychange 1s infinate 1s;
    }
    
    @keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
    @-webkit-keyframes mychange{
        0%{width:90px; height:90px;  }
        50%{width:130px; height:130px;}
        100%{width:200px; height:200px;}
    }
</style>

Tanda peratus 0% dan 100% dalam kod di atas tidak boleh ditinggalkan, 0% boleh digantikan dengan daripada, dan 100% boleh digantikan dengan kepada . Untuk animasi mychange mempunyai kesan, ia mesti dipanggil melalui sifat animasi CSS3.

Perbezaan antara peralihan css dan animasi

Perbezaan utama ialah peralihan perlu mencetuskan peristiwa untuk menukar sifat CSSnya dari semasa ke semasa; Tanpa mencetuskan sebarang peristiwa, animasi juga boleh mengubah sifat CSS elemen secara eksplisit dari semasa ke semasa untuk mencapai kesan animasi.

1) Peralihan CSS perlu dicetuskan oleh peristiwa (seperti :hover, dll.) untuk berfungsi, tetapi animasi tidak.

2) Peralihan hanya mempunyai satu set (dua: permulaan-akhir) bingkai utama dan animasi boleh mentakrifkan berbilang bingkai utama.

3) Gunakan peralihan dan animasi untuk mencipta kesan dinamik apabila tetikus melayang Apabila tetikus dialihkan, kesan peralihan perlahan-lahan akan berubah kembali kepada rupa asalnya, manakala animasi akan bertukar kembali kepada diri anda yang asal.

(Mempelajari perkongsian video: tutorial video css, tutorial pengenalan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah perbezaan antara peralihan dan animasi dalam CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!