CSS анимация не работает. (ключевые кадры между семействами шрифтов) Альтернатива?

Я заранее прошу прощения, я знаю, что должно быть какое-то простое решение, но я просто не нахожу никакого.

Прямо сейчас я использую эту простую технику для замены шрифтов на веб-странице в качестве анимации. Проблема в том, что только последняя версия Chrome, кажется, знает, что я пытаюсь сделать. Есть ли альтернатива этому в jQuery?

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

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>

Другие вопросы по тегам