2014-12-04 63 views
0

我在Chrome和Safari中試過它,每次按下Open鏈接時都會運行動畫,但在Firefox中,動畫只在第一次按鏈接時運行。之後,當我按鏈接它不加載動畫。每次按鏈接時是否有任何操作可以使動畫運行?CSS(點擊)動畫不會在Firefox中播放多次

這裏就是我的工作:

http://jsfiddle.net/p5hkyovs/4/

<div id="over"> 
    <div class="animation">Fade in - <a href="#start">Back</a></div> 
</div> 
<div id="start"> 
<a href="#over">Open</a> 
</div> 

CSS

#over { 
    display: none; 
} 
#over:target { 
    display: inline-block 
} 
#over:target ~ #start { 
    display: none; 
} 
div.animation { 
    -webkit-animation:fadeIn .5s ease-in-out; 
    -moz-animation:fadeIn .5s ease-in-out; 
    animation:fadeIn .5s ease-in-out; 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
} 
@-webkit-keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

回答

0

我認爲這個問題是針對animation-name: fadeIn;價值缺失的Mozilla瀏覽器廠商的前綴。

試試這個JSFIDDLE