信号动画不工作jsFiddle

Question

我试图重新创建在JsFiddle http://codepen.io/cayoub88/pen/DCemr找到以下动画效果，但没有什么成功。为什么会发生这种情况？

我的小提琴，可以在http://jsfiddle.net/9pknjor8/

代码中找到

body { 
 
    background: #428CD6; 
 
} 
 
.signal { 
 
    border: 3px solid #fff; 
 
    border-radius: 30px; 
 
    height: 30px; 
 
    left: 50%; 
 
    margin: -15px 0 0 -15px; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 30px; 
 
    animation: pulsate 1s ease-out; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes pulsate { 
 
    0% { 
 
    transform: scale(.1); 
 
    opacity: 0.0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(1.2); 
 
    opacity: 0; 
 
    } 
 
}

<div class="signal"></div>

Answer 1

你必须定义webkitmoz等为它上的jsfiddle工作，我不认为这是必要的在codepen（http://blog.codepen.io/2014/03/28/new-feature-autoprefixer/）感谢@anpsmn我试了这个，它在我的铬合金工作正常http://jsfiddle.net/9pknjor8/2/

.signal { 
border:3px solid #fff; 
border-radius:30px; 
height:30px; 
left:50%; 
margin:-15px 0 0 -15px; 
opacity:0; 
position:absolute; 
top:50%; 
width:30px; 

-webkit-animation: pulsate 1s ease-out; 
-webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes pulsate { 
0% { 
    transform:scale(.1); 
    opacity: 0.0; 
} 
50% { 
    opacity:1; 
} 
100% { 
    transform:scale(1.2); 
    opacity:0; 
}