css3动画在chrome中不起作用答案

【问题标题】：css3 animation not working in chromecss3动画在chrome中不起作用
【发布时间】：2021-02-12 05:08:01
【问题描述】：

我有一个在 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>

【问题讨论】：

如果有人想看动画...messagelab.ro/pages/Presentation.html#/its o 和 e 应该移动，就像在 firefox 中一样...
你有 Chrome 的@-webkit-keyframes aia2{ 规则吗？
好点 :) 所以在 -moz-keyframes {-webkit-transform..} 里面写是多余的？

标签： html css css-animations

【解决方案1】：

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

-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{
    ...
}

【讨论】：

【解决方案2】：

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

【讨论】：

那么解决办法是什么，如果你想在google chrome中做webkit-keyframes-zoominDwn和zoomoutdown？

【解决方案3】：

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

仅在 Firefox 中可接受：

animation-name: 'theAni';

在所有浏览器（Chrome、Edge、Safari 和 Firefox）中均可接受：

animation-name: theAni;

【讨论】：

【解决方案4】：

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

这里有一个简单的代码，你可以试试：

 <!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>

【讨论】：

您好，欢迎 :) 您能否为您的答案添加更多细节？我对 css3 不是很熟悉，但我感觉 OP 可能无法理解您所说的内容
我又试了一次。希望有用。