JS 怎么动态设置CSS3动画的样式

 我来答

2个回答

#热议# 为什么说不要把裤子提到肚脐眼？

老炉传说
2017-10-23 · TA获得超过136个赞

知道小有建树答主

回答量：172

采纳率：78%

帮助的人：136万

我也去答题访问个人页

关注

展开全部

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body{
            padding: 20px;
            background-color:#FFF;
        }
        .colorchange
        {
            animation:myfirst 5s;
            -moz-animation:myfirst 5s; /* Firefox */
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
            -o-animation:myfirst 5s; /* Opera */
        }
 
        @keyframes myfirst
        {
            from {background:red;}
            to {background:yellow;}
        }
 
        @-moz-keyframes myfirst /* Firefox */
        {
            from {background:red;}
            to {background:yellow;}
        }
 
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {background:red;}
            to {background:yellow;}
        }
 
        @-o-keyframes myfirst /* Opera */
        {
            from {background:red;}
            to {background:yellow;}
        }
        #main{
            width:100px;
            height:100px;
            background:red;
        }
        #cgbt{
            width: 100px;
            margin: 20px 0 0 0;
            text-align: center;
            cursor: pointer;
        }
        #cgbt:hover{
            background-color: #2D93CA;
        }
    </style>
</head>
<body>
<div id="main">
    我会变么？
</div>
<div id="cgbt">
    点我让上面的变颜色
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
    $(document).ready(function(){
        $("#cgbt").click(function(){
            $("#main").attr("class","colorchange");
        });
    });
</script>
</body>
</html>