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; }}

Mozilla上的CSS动画问题

1 个答案: