Проблема с анимацией CSS на Mozilla

Question

Я хочу использовать анимацию css-пишущей машинки в слайдере. Хорошо работайте на Chrome, но не работает должным образом в Mozilla. Только хорошо работайте в одном туре слайдера (есть 4 слайда). Как я могу это исправить?

JS

  $this.css({display:'block'}).show(); // make sure slide shows 
      $text1.css({left:'-30px', opacity:0,animation:'typing 2s steps(30,end))', display:'block', zIndex:'9'}).delay(100).animate({left:'0px', opacity:1, 100); 
      $text2.css({left:'-30px', opacity:0, display:'block', zIndex:'9'}).delay(100).animate({left:'0px', opacity:1}, 100); 
      $btn.css({opacity:0, display:'block', zIndex:'9'}).delay(3300).animate({opacity:1}, 1000); 
      $image.css({marginTop:'30px', opacity:0, display:'block', zIndex:'1'}).delay(500).animate({marginTop:'0px',opacity:1}, 1000); 
      $blurImg.css({marginTop:'30px', opacity:0, display:'block', zIndex:'2'}).delay(500).animate({marginTop:'0px',opacity:1}, 1000).animate({opacity:0}, 600, makeDisplayNone); 

CSS

@-webkit-keyframes typing {from { width:0; }} 

Answer 1

Синтаксис используется для Webkit фрезы только

Вам нужно определить анимацию для -moz браузера (Firefox), а также и версия без предварительного уведомления

@-moz-keyframes typing {from { width:0; }} 

@keyframes typing {from { width:0; }}