Chrome的关键帧动画不能正常工作 [英] Chrome Keyframe animation not working

问题描述

我目前想实现这个 preloader codePEN 和它在IE和Firefox的工作，但不是Chrome版本36.0.1985.125米

任何想法，为什么动画不能在Chrome上运行？

  {体背景：＃ECF0F1}。$ P $ {ploader
    位置：绝对的;
    顶部：50％;
    左：50％;
    变换：翻译（-50％，-50％）;
    宽度：100像素;
    高度：100像素;
}
。preloader小时{
    边框：0;
    保证金：0;
    宽度：40％;
    高度：40％;
    位置：绝对的;
    边界半径：50％;动画：旋2S缓解无限
}。preloader：首先，孩子{
    背景：＃19A68C;
    动画延迟：-1.5s
}
。preloader：第n个孩子（2）{
    背景：＃F63D3A;
    动画延迟：-1s
}
。preloader：第n个孩子（3）{
    背景：＃FDA543;
    动画延迟：-0.5s
}
。preloader：最后一子{
    背景：＃193B48
}@ -webkit-关键帧旋转{
  0％，100％{ -  WebKit的变换：翻译（0）}
  25％{ -  WebKit的变换：翻译（160％）}
  50％{ -  WebKit的变换：翻译（160％，160％）}
  75％{ -  WebKit的变换：翻译（0，160％）}
}@keyframes旋{
  0％，100％{变换：翻译（0）}
  25％{变换：翻译（160％）}
  50％{变换：翻译（160％，160％）}
  75％{变换：翻译（0，160％）}
}
 

解决方案

您必须包括所有的标签供应商prefixes。

  {体
    背景：＃ECF0F1;
}。$ P $ {ploader
    位置：绝对的;
    顶部：50％;
    左：50％;
    -moz-变换：翻译（-50％，-50％）;
    -ms变换：翻译（-50％，-50％）;
    -o变换：翻译（-50％，-50％）;
    -webkit-变换：翻译（-50％，-50％）;
    变换：翻译（-50％，-50％）;
    宽度：100像素;
    高度：100像素;
}    。preloader小时{
        边框：0;
        保证金：0;
        宽度：40％;
        高度：40％;
        位置：绝对的;
        边界半径：50％;
        -moz-动画：旋2S缓解无限的;
        -o-动画：旋2S缓解无限的;
        -webkit-动画：旋2S缓解无限的;
        动画：旋2S缓解无限的;
    }    。preloader：首先，孩子{
        背景：＃19A68C;
        -moz-动画延迟：-1.5s;
        -o-动画延迟：-1.5s;
        -webkit-动画延迟：-1.5s;
        动画延迟：-1.5s;
    }    。preloader：第n个孩子（2）{
        背景：＃F63D3A;
        -moz-动画延迟：-1s;
        -o-动画延迟：-1s;
        -webkit-动画延迟：-1s;
        动画延迟：-1s;
    }    。preloader：第n个孩子（3）{
        背景：＃FDA543;
        -moz-动画延迟：-0.5s;
        -o-动画延迟：-0.5s;
        -webkit-动画延迟：-0.5s;
        动画延迟：-0.5s;
    }    。preloader：最后一子{
        背景：＃193B48;
    }@ -moz-关键帧旋转{
    0％，100％{
        -moz-变换：翻译（0）;
    }    25％{
        -moz-变换：翻译（160％）;
    }    50％{
        -moz-变换：翻译（160％，160％）;
    }    75％{
        -moz-变换：翻译（0，160％）;
    }
}@ -webkit-关键帧旋转{
    0％，100％{
        -webkit-变换：翻译（0）;
    }    25％{
        -webkit-变换：翻译（160％）;
    }    50％{
        -webkit-变换：翻译（160％，160％）;
    }    75％{
        -webkit-变换：翻译（0，160％）;
    }
}@keyframes旋{
    0％，100％{
        变换：翻译（0）;
    }    25％{
        变换：翻译（160％）;
    }    50％{
        变换：翻译（160％，160％）;
    }    75％{
        变换：翻译（0，160％）;
    }
}
 

I am currently trying to implement this Preloader Codepen and its working in IE and Firefox but not Chrome Version 36.0.1985.125 m.

Any idea why the animation does not run in 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%)}
}

解决方案

You have to include the vendor prefixes for all the tags.

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的关键帧动画不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！