在less中使用css3的animation 属性

• 首先，温习一下css3的animation属性：

  
  
  animation属性--来自w3school.com
• 然后，在css文件中使用animation 的通常写法：

.div{
            width: 100%;
            height:447px;
            background-repeat: no-repeat;
            background-color: #fff;
            animation:frams 10s infinite;
        }
        @keyframes frams {
            0%{
                background-color:red;
            }
            50%{
                background-color: green;
            }
            100%{
                background-color: blue;
            }
        }

像这样就可以了，但是less中这样写是不会生效的。下面再看看less怎么写：

/* 定义一个动画（需要设置至少一个形参name） */
.donghua(@DHname){
    @keyframes @DHname {
        0%{
            background-color:red;
        }
        50%{
            background-color: green;
        }
        100%{
            background-color: blue;
        }
    }
};

/* 调用定义的动画（传入实参name）*/
.donghua(myDongHua); // 名称

/* 
1、定义动画属性 （动画有6条默认的属性，详情可访问https://www.w3school.com.cn/cssref/pr_animation.asp）
2、@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state,@animation-iteration-count
3、此处只需引入你需要的属性，不需要的不能引入，否则会报错 
*/
.animation(@animation-name,@animation-duration,@animation-timing-function){
    animation: @arguments;
}
/* 在样式中引入animation（注意参数即属性）*/
.divBackGroud{
    width: 100%;
    height: 300px;
    background-color:red;
    .animation(myDongHua,5s,infinite); // 1|动画名 2|动画时间 3|播放函数(比如：循环等)
}

• 总结一下大概需要四步；

1. 定义一个动画，并且设置相关入参；
2. 调用定义的动画，并传参；
3. 定义动画属性（只需要定义自己需要的）；
4. 把定义好的动画属性引入到类对象