信号动画不适用于jsFiddle

Question

我试图在JsFiddle上的http://codepen.io/cayoub88/pen/DCemr重新创建以下动画效果，但收效甚微。出现这种情况的原因是什么？

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

找到

代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你必须定义webkit moz等才能在jsfiddle上工作我不认为在codepen（http://blog.codepen.io/2014/03/28/new-feature-autoprefixer/）中是必要的，感谢@anpsmn我试过这个它在我的chrome 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;
}