css - Chrome 关键帧动画不起作用

Question

我目前正在尝试实现这个 Preloader Codepen它在 IE 和 Firefox 中工作，但在 Chrome 版本 36.0.1985.125 m 中不工作。

知道为什么动画不能在 Chrome 中运行吗？

body{background:#ECF0F1}

.preloader{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100px;
    height:100px;
}
.preloader hr{
    border:0;
    margin:0;
    width:40%;
    height:40%;
    position:absolute;
    border-radius:50%;animation:spin 2s ease infinite
}

.preloader :first-child{
    background:#19A68C;
    animation-delay:-1.5s
}
.preloader :nth-child(2){
    background:#F63D3A;
    animation-delay:-1s
}
.preloader :nth-child(3){
    background:#FDA543;
    animation-delay:-0.5s
}
.preloader :last-child{
    background:#193B48
}

@-webkit-keyframes spin{
  0%,100%{-webkit-transform:translate(0)}
  25%{-webkit-transform:translate(160%)}
  50%{-webkit-transform:translate(160%, 160%)}
  75%{-webkit-transform:translate(0, 160%)}
}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

Answer 1

看起来你在

上缺少 -webkit- 前缀

.preloader hr {
  -webkit-animation: spin 2s ease infinite;
}

还有每个 child 的-webkit-animation-delay？