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

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

Answer 2

您必须包含所有代码的供应商前缀。

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

Chrome关键帧动画无效

2 个答案: