Question

我正在做一些测试，以便稍后为网站制作动画，我希望能够在点击时弹出一个按钮但是我似乎无法让它工作。该标题的动画在页面加载时工作正常。

这是我的整个代码

<head>

    <script>    
        function click(test){
            test.style.webkitAnimationName = 'bounce';
            test.style.webkitAnimationDuration = '3s';

             setTimeout(function() {
                 test.style.webkitAnimationName = '';
             }, 4000);
        }
    </script>
    <style>
        h1 {
            -webkit-animation-duration: 3s;
            -webkit-animation-name: slidein;
        }

        @-webkit-keyframes slidein {
            0%  {
                margin-left: 100%;
                width: 300%; 
            }

            100%{
                margin-left: 0%;
                width: 100%;
            }
        }

        @-webkit-keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            40% {
                -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
            }

            60% {
                -webkit-transform: translateY(-15px);
                transform: translateY(-15px);
            }
        }
    </style>
    <title>Success message</title>
</head>
<body>
    <H1> You entered all the data required </H1>
    <button onclick="click(this)">amg4aeorg;ji</button>

</body>

有人可以告诉我它为什么不起作用，提前谢谢

修改

我做过一些测试，发现javascript函数实际上并没有运行，有人知道为什么吗？ THX

Answer 1

创建一个CSS类来包装动画，然后将CSS 类名添加到元素中。

test.setAttribute('class','bounceThis');

CSS：

.bounceThis {
    -webkit-animation: bounce 3s ease-out;
    -moz-animation: bounce 3s ease-out;
    animation: bounce 3s ease-out;
}

@-webkit-keyframes bounce { ... etc.... }

CSS3动画无法通过javascript调用

1 个答案: