如何用js添加css3动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Reagan_/article/details/81675203

其实很简单，我们只需要提前写好变化前的div，和变化后的div，在js中控制class类名的改变来实现动画就可以了。

//html部分：
.div1 {
    width:22px;
    height:22px；
    transition: 0.4s;
}
.div2 {
    width:200px;
    height:130px;
    transition: 0.3s;
}
.div3 {
    width:76px;
    height:76px;
    transition: 1s;
}
.newdiv1 {
    transform: translatex(12px);
    transition: 0.3s;
    width:200px;
    height:130px;
}
.newdiv2 {
    transform: rotate(360deg);
    transition: 1s;
    width:76px;
    height:76px;
}
.newdiv3 {
    transform: scale(1,1);
    transition: 0.4s;
    width:22px;
    height:22px;
}
//上面我们预设了三个css3动画效果


//js部分：
div1.onmouseenter = function(){
    div1.className = "newdiv1";    //此处要注意根据自己代码的实际情况来选中元素
｝
div2.onmouseenter = function(){
    div2.className  = "newdiv2";
｝
div3.onmouseenter = function(){
    div3.className  = "newdiv3";
｝
    
div1.onmouseleave = function(){
    div1.className = "div1";       //要恢复原样只要将class类名改成原来的就可以了
｝
div2.onmouseleave = function(){
    div2.className  = "div2";
｝
div3.onmouseleave = function(){
    div3.className  = "div3";
｝