CSS動畫在Firefox中晃動

我寫了一些脈衝動畫，但它不能正常工作。這個圖像在Firefox瀏覽器中非常震撼。我能做些什麼來防止它？CSS動畫在Firefox中晃動

.heart::before { 
 
    content: "\f004"; 
 
    color: #E98E1B; 
 
} 
 

 
.pulseHeart { 
 
    -webkit-animation: pulseHeart 1s linear infinite; 
 
    -moz-animation: pulseHeart 1s linear infinite; 
 
    -ms-animation: pulseHeart 1s linear infinite; 
 
    animation: pulseHeart 1s linear infinite; 
 
} 
 

 
@keyframes "pulseHeart" { 
 
    0% { 
 
     -webkit-transform: scale(1.1); 
 
     -moz-transform: scale(1.1); 
 
     -o-transform: scale(1.1); 
 
     -ms-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(0.8); 
 
     -moz-transform: scale(0.8); 
 
     -o-transform: scale(0.8); 
 
     -ms-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     -moz-transform: scale(1); 
 
     -o-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-moz-keyframes pulseHeart { 
 
    0% { 
 
     -moz-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -moz-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -moz-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-webkit-keyframes "pulseHeart" { 
 
    0% { 
 
     -webkit-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-ms-keyframes "pulseHeart" { 
 
    0% { 
 
     -ms-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -ms-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -ms-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
    <title>page</title> 
 
    <body> 
 
    <span class="fa heart pulseHeart"></span> 
 
    </body> 
 
</html>

我見過的對堆棧的代碼段，但他們並沒有幫助我。

來源

2016-11-04 Anastasia Antontseva

您應該爲transform屬性添加初始值。

.heart::before { 
 
    content: "\f004"; 
 
    color: #E98E1B; 
 
} 
 

 
.pulseHeart { 
 
    -webkit-transform: scale(1); // !!! NEW LINE !!! 
 
    -moz-transform: scale(1); // !!! LINE !!! 
 
    -o-transform: scale(1); // !!! LINE !!! 
 
    -ms-transform: scale(1); // !!! LINE !!! 
 
    transform: scale(1); // !!! LINE !!! 
 
    -webkit-animation: pulseHeart 1s linear infinite; 
 
    -moz-animation: pulseHeart 1s linear infinite; 
 
    -ms-animation: pulseHeart 1s linear infinite; 
 
    animation: pulseHeart 1s linear infinite; 
 
} 
 

 
@keyframes "pulseHeart" { 
 
    0% { 
 
     -webkit-transform: scale(1.1); 
 
     -moz-transform: scale(1.1); 
 
     -o-transform: scale(1.1); 
 
     -ms-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(0.8); 
 
     -moz-transform: scale(0.8); 
 
     -o-transform: scale(0.8); 
 
     -ms-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     -moz-transform: scale(1); 
 
     -o-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-moz-keyframes pulseHeart { 
 
    0% { 
 
     -moz-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -moz-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -moz-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-webkit-keyframes "pulseHeart" { 
 
    0% { 
 
     -webkit-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -webkit-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
} 
 

 
@-ms-keyframes "pulseHeart" { 
 
    0% { 
 
     -ms-transform: scale(1.1); 
 
     transform: scale(1.1); 
 
    } 
 
    50% { 
 
     -ms-transform: scale(0.8); 
 
     transform: scale(0.8); 
 
    } 
 
    100% { 
 
     -ms-transform: scale(1); 
 
     transform: scale(1); 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    </head> 
 
    <title>page</title> 
 
    <body> 
 
    <span class="fa heart pulseHeart"></span> 
 
    </body> 
 
</html>

來源

2016-11-04 19:43:17

謝謝。它有效，但爲什麼？ –

@AnastasiaAntontseva其實我不知道，但它可以幫助我。我認爲有更優雅的解決方案。 –

這個片段也在FF中晃動。如果你想有一個平滑的動畫，你最好從規模1到0.8到1 無需設置初始值 http://codepen.io/janwagner/pen/LbYMyR – Cherrypig

CSS動畫在Firefox中晃動

回答

相關問題