25

我有一个在 Firefox 中工作的小动画，但在 webkit 浏览器中没有。也许有人看到了错误，因为我已经找了一个小时......它是 impress.js 演示文稿的一部分，类似于 prezi。谢谢！

CSS：

#its.step.present h5{

display: inline-block;
position:absolute;




 animation: aia2 5s linear infinite alternate;
 -moz-animation: aia2 5s linear infinite alternate;
 -webkit-animation: aia2 5s linear infinite alternate;
 -ms-animation: aia2 5s linear infinite alternate;
 -o-animation: aia2 5s linear infinite alternate;

-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;


}
@-moz-keyframes aia2{
    0%{

        left:120px;
        -moz-transform:scale(1) rotate(0deg);
        -webkit-transform:scale(1) rotate(0deg);
        -ms-transform:scale(1) rotate(0deg);
        -o-transform:scale(1) rotate(0deg);
        transform:scale(1) rotate(0deg);

        color: red;
    }
    90%{
        left: 580px;

        -moz-transform:scale(1) rotate(2000deg);
        -webkit-transform:scale(1) rotate(2000deg);
        -ms-transform:scale(1) rotate(2000deg);
        -o-transform:scale(1) rotate(2000deg);
        transform:scale(1) rotate(2000deg);

    }
    100%{
        left: 580px;


    }
}

html:

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>
            <ul>
                <li>Web Development,</li>
                <li>Web Design,</li>
                <li>Log<h5>o</h5>&nbsp;&nbsp; Design,</li> 
                <li>Web Marketing,</li>
            </ul>

            <ul class="doua">
                <li><h6>e</h6>&nbsp;&nbsp;Commerce,</li>
                <li>CMS (WP, J, D),</li> 
                <li>Cust&nbsp; m Apps</li> 
                <li>and others.</li>
            </ul>
        </p>
    </div>
4

4 回答 4

56

您必须将一般动画规则放在浏览器特定规则之后：

-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; /* this comes last */

既然你有-webkit-animation: aia2，-moz-animation: aia2等等，你必须为每个浏览器设置动画，比如：

@-moz-keyframes aia2{
    ...
}

@-webkit-keyframes aia2{
    ...
}
@-o-keyframes aia2{
    ...
}
于 2012-09-04T14:07:59.130 回答
6

Chrome v43 删除了动画的 -webkit- 前缀，所以如果这在以前有效但现在无效，这可能就是原因。

于 2015-06-26T18:20:22.177 回答
1

检查您是否在 Firefox 中开发的一件事是 Firefox 将使用引号中的动画名称，但 Chrome/Edge/Safari/Webkit 不会。

仅在 Firefox 中可接受：

animation-name: 'theAni';

适用于所有浏览器（Chrome、Edge、Safari 和 Firefox）：

animation-name: theAni;
于 2020-09-10T17:04:31.160 回答
0

对于您要添加动画的每个属性，您首先需要确定其值，然后您可以在关键帧中更改它。

这是一个简单的代码，您可以尝试一下：

 <!DOCTYPE html>
 <head>
      <style>
           #forTest {
                display: inline-block;
                background-color: darkcyan;
                width: 500px; /* here we determine the value of property that we want add animation */
                height: 30px;

                animation: a1;
                animation-fill-mode: forwards;
                animation-duration: 5s;
           }

           @keyframes a1{
                to {
                     width: 100px;
                }
           }
      </style>
 </head>
 <body>
      <div id="forTest"></div>
 </body>
 </html>
于 2021-02-09T19:00:33.897 回答