javascript - Mengapa tetapan mod-isi-animasi saya tidak berkuat kuasa

Question

.telur_emas_pecah{

background: url("../img/animation/goldeggBroke.png");
width: 400px;
height: 400px;
animation: eggbroken 3s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: steps(80);

}

@-webkit-keyframes pecah telur {

0%{
    background-position: 0 0;
}
90%{
    background-position: 0 -32000px;
}
100%{
    background-position: 0 -32000px;
}

}

Tukar gaya ini kepada elemen secara dinamik dan mahu ia kekal tidak berubah pada bingkai terakhir. Tetapi ia tidak berkesan

Answer 1

Alih keluar awalan webkit dan ubah suainya seperti berikut:

.gold_egg_broken{
    background: url("../img/animation/goldeggBroke.png");
    width: 400px;
    height: 400px;
    animation: eggbroken 3s;
    animation-fill-mode:forwards;
    animation-timing-function: steps(80);
}

Memandangkan atribut animasi berfungsi, ini bermakna atribut yang berkaitan tidak perlu diberi awalan dalam penyemak imbas ini. animation是一个综合属性，默认的animation-fill-mode是none，使用带前缀的属性webkit-animation-fill-mode不能覆盖掉animation-fill-mode, jadi awalan perlu dialih keluar.

Answer 2

Terima kasih atas jemputan,
@luckness telah menjelaskannya dengan sangat jelas.
Selain itu, awalan seperti webkit hendaklah serasi dengan versi penyemak imbas yang berbeza
Cara penulisan yang lebih konservatif boleh:

p{
     -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
         -ms-animation-fill-mode: forwards;
          -o-animation-fill-mode: forwards;
             animation-fill-mode: forwards;
}