Chrome 关键帧动画不起作用答案

【问题标题】：Chrome Keyframe animation not workingChrome 关键帧动画不起作用
【发布时间】：2014-09-20 03:19:10
【问题描述】：

我目前正在尝试实现这个 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%)}
}

【问题讨论】：

标签： css html google-chrome animation

【解决方案1】：

您必须为所有标签添加供应商前缀。

body {
    background: #ECF0F1;
}

.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

    .preloader hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        -moz-animation: spin 2s ease infinite;
        -o-animation: spin 2s ease infinite;
        -webkit-animation: spin 2s ease infinite;
        animation: spin 2s ease infinite;
    }

    .preloader :first-child {
        background: #19A68C;
        -moz-animation-delay: -1.5s;
        -o-animation-delay: -1.5s;
        -webkit-animation-delay: -1.5s;
        animation-delay: -1.5s;
    }

    .preloader :nth-child(2) {
        background: #F63D3A;
        -moz-animation-delay: -1s;
        -o-animation-delay: -1s;
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .preloader :nth-child(3) {
        background: #FDA543;
        -moz-animation-delay: -0.5s;
        -o-animation-delay: -0.5s;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .preloader :last-child {
        background: #193B48;
    }

@-moz-keyframes spin {
    0%,100% {
        -moz-transform: translate(0);
    }

    25% {
        -moz-transform: translate(160%);
    }

    50% {
        -moz-transform: translate(160%, 160%);
    }

    75% {
        -moz-transform: translate(0, 160%);
    }
}

@-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%);
    }
}

【讨论】：

【解决方案2】：

看起来您缺少

上的 -webkit- 前缀

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

每个孩子的-webkit-animation-delay？

【讨论】：