-o-animation css 不工作答案

【问题标题】：-o-animation css not working-o-animation css 不工作
【发布时间】：2014-09-08 14:19:55
【问题描述】：

我无法让 -o-animation 与 Opera 一起使用。我正在使用浏览器版本 23.0.1522.77。此外，在某些版本中，动画功能可以在 Chrome 中使用，但并非总是如此。我真的需要使用 -webkit-animation 将我的代码加倍才能始终工作吗？

这是我的 CodePen：http://codepen.io/anon/pen/sAGJj

.box{
     width: 100px;  
     height: 100px;
     display: block;
     position: absolute;
     border: 2px solid white;
     background: #063c84;
     border-radius: 10px;
     animation: opacity 10s infinite linear,
     colorChange 10s infinite ease-in-out;
     -o-animation: opacity 10s infinite linear,
     colorChange 10s infinite ease-in-out;
    }

  @keyframes opacity{
     0% {opacity: 1}
     50% {opacity: 1}
     75% {opacity: .7}
     100% {opacity: 1}
    }

  @keyframes colorChange 
   {
     0% { background-color: #00a2e8; }
     25% { background-color: #063c84; }
     50% { background-color: #9121cd; }
     75% { background-color: #01b001; }
     100% { background-color: #00a2e8; }
   }

【问题讨论】：

你应该阅读这个dev.opera.com/articles/css3-animations

标签： html css opera css-animations

【解决方案1】：

您不需要将代码与-webkit-animation 重复，因为Opera 支持-webkit-animation。只需替换：

-o-animation

与

-webkit-animation

http://caniuse.com/#feat=css-animation

【讨论】：

这行得通。我仍然必须将我的@keyframes 代码与@-webkit-keyframes 加倍才能正常工作。有没有更好的方法不加倍动画代码？我会提高你的答案，但我没有足够高的声誉。谢谢，
目前还没有办法绕过 css 复制。顺便说一句，漂亮的动画。你使用的是 Sass 还是 LESS？如果是这样，您可以为所有 @keyFrame 动画创建一个函数并将它们导出两次。
老实说，我没有使用任何一个，但搜索这两个有助于回答我关于如何在 CSS 中创建变量的另一个问题，就像当时一样。谢谢，

【解决方案2】：

你不需要前缀-o-Opera ist webkit。

源 Opera — 300 Million Users and Move to WebKit

【讨论】：