CSS 모질라 관련 문제

Question

슬라이더에 타자기 CSS 애니메이션을 사용하고 싶습니다. 크롬에서는 잘 작동하지만 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

사용하는 구문은 웹킷 브라우저의 경우입니다

만

당신은뿐만 아니라 -moz 브라우저 (파이어 폭스)에 대한 애니메이션을 정의해야하고, 접두사가없는 버전

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

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