Question

我无法使用-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; }
   }

Answer 1

您不需要使用-webkit-animation加倍代码，因为Opera支持-webkit-animation。只需更换：

-o-animation

带

-webkit-animation

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

Answer 2

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

源歌剧 - 300 Million Users and Move to WebKit

-o-animation css无法正常工作

2 个答案: