신호 애니메이션이 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>

당신이 jsfiddle에서 작동하는 webkit moz 등을 정의 할 필요가

Answer 1

그게 필요하다고 생각하지 않습니다 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; 
}