CSS3 动画在 Brackets 实时预览中有效，但在我的网站上实时无效答案

【问题标题】：CSS3 Animation works in Brackets live preview but not when live on my SiteCSS3 动画在 Brackets 实时预览中有效，但在我的网站上实时无效
【发布时间】：2015-03-30 06:11:23
【问题描述】：

我在我的网站上使用this 微调器。

对于那些不熟悉方括号实时预览的人，我相信编辑器会从临时 http 服务器为站点提供服务，并在代码发生更改时进行更新。

每当我通过此功能检查网站时，微调器都会工作。如果我在 Brackets 的自定义 Google Chrome 窗口中访问我的网站 www.tylererickson.com 也是如此，但是如果在普通 Chrome 窗口中打开，微调器不会动画。

任何帮助都非常感谢，在此先感谢。

代码：

HTML

<div class="loader">
  <div class="inner one"></div>
  <div class="inner two"></div>
  <div class="inner three"></div>
</div>

CSS

.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

【问题讨论】：

标签： html css css-animations adobe-brackets

【解决方案1】：

我认为您需要为 chrome 添加浏览器供应商前缀才能工作。如果您查看当前支持动画的 chrome，则需要在关键帧前添加 -webkit。看这里：http://caniuse.com/#feat=css-animation

最后你会得到这样的东西：

@-webkit-keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

然后会这样使用：

.inner.two {
  right: 0%;
  top: 0%;
  -webkit-animation: rotate-two 1s linear infinite;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

您还需要为所有其他动画制作这个。我只是举一个例子

【讨论】：

【解决方案2】：

在 Codepen 中动画没有前缀的原因是因为 Codepen 使用 Prefixfree 并且它会自动为浏览器应用所需的前缀。

您需要手动添加前缀或将Prefixfree jQuery 插件添加到您的页面。

我建议手动设置加载器的前缀，而不是使用插件，原因是加载动画应该首先加载到您的页面中，使用前缀插件意味着用户必须等待 jQuery 和前缀插件先加载，会导致动画加载延迟。

所以添加以下前缀，它会按预期工作。

.inner.one {
    -webkit-animation: rotate-one 1s linear infinite;
    -moz-animation: rotate-one 1s linear infinite;
    animation: rotate-one 1s linear infinite;
}
.inner.two {
    -webkit-animation: rotate-two 1s linear infinite;
    -moz-animation: rotate-two 1s linear infinite;
    animation: rotate-two 1s linear infinite;
}
.inner.three {
    -webkit-animation: rotate-three 1s linear infinite;
    -moz-animation: rotate-three 1s linear infinite;
    animation: rotate-three 1s linear infinite;
}

对于@keyfames：

/*Spinner Styles*/
@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-moz-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

【讨论】：