CSS動畫無效。 （字體家族之間的關鍵幀）另類？

Question

我對先進的道歉，我知道必須有一些簡單的解決方案，但我只是沒有找到任何。

現在我正在使用這種簡單的技術將網頁上的字體作爲動畫進行交換。問題是，只有最新版本的Chrome似乎知道我正在嘗試做什麼。也許在jQuery中有替代方案嗎？

@keyframes switch { 
0% {font-family: Comic Sans;} 
50% {font-family: Arial;} 
100% {font-family: Comic Sans;} } 

Answer 1

這是jQuery中關鍵幀動畫的快速呈現。

var $switcher = $('#switcher'); 
 

 
function switcher() { 
 
    $switcher.toggleClass('arial comicsans'); 
 
} 
 

 
setInterval(switcher, 1000);

.arial { font-family: Arial; } 
 
.comicsans { font-family: Comic Sans'; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="switcher" class="arial">This is a test</div>