CSS3 动画和 JavaScript 类切换后的动画出现问题

Problems with CSS3 animations and animations following a javascript class switch

本文关键字：动画 问题 JavaScript CSS3      更新时间：2023-09-26

我试图在通过javascript更新元素类时触发动画。 目的是让它成为PhoneGap应用程序的一部分，因此-webkit-前缀应该可以完成我的知识。

无论如何，当我在 Chrome 中进行测试时，动画目前不起作用，无论是在元素上还是在新类上。 谁能解释一下我在这里出错的地方？

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WebSockets</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
            Start
        </a>
        <div id="ani"></div>
    </body>
</html>

风格.css

@-webkit-keyframes bounce {  
    0%, 100% {
        -webkit-transform: translateY(50px);
    }
    20%, 60% {
        -webkit-transform: translateY(70px);
    }
    80%, 40% {
        -webkit-transform: translateY(30px);
    }
}
#ani {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    -webkit-transform: all 0.1s;
    -webkit-animation: 'bounce' 1s 'ease-in-out';
    -webkit-animation-iteration-count: 3;
    -webkit-animation-delay: 2s;
}
#ani.bounce{
    -webkit-animation: 'bounce' 1s 'ease-in-out';
    -webkit-animation-iteration-count: 3;
}
#ani.fade{
    -webkit-transition: opacity 0.4s linear;
    -webkit-animation-delay: 3s;
}

有两个问题。首先，内联Javascript中有一个拼写错误：getElementById（'ani1'）。在 id 处附加了一个"1"。

第二件事是你必须删除 -webkit-animation 语句中的引号。

不對：

-webkit-animation: 'bounce' 1s 'ease-in-out';

正确：

-webkit-animation: bounce 1s ease-in-out;

如果你修复了它，它应该可以工作;-）

相关文章：