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:

属性	描述
transtion-property	指定过渡的属性
transtion-duration	指定过渡所需时间
transtion-timing-function	指定过渡函数
transtion-delay	指定过渡延迟时间

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:

属性	描述
animation-name	指定关键帧动画的名字
animation-duration	指定动画播放所需时间，单位秒
animation-timing-function	指定动画播放方式
animation-delay	指定动画开始时间，单位秒
animation-iteration-count	指定动画的播放次数，默认为1，若为infinite，则无限次循环播放
animation-direction	指定动画的播放方向，默认为normal，若为alternate，即轮流反向播放

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!