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>