css3 实现动画效果,无限重复循环动画

2019-06-15

主要需要使用 -webkit-animation
如:
-webkit-animation:donghua 3s infinite linear ;


其中donghua是自己定义的动画名称,3s是整个动画的持续时间,infinite是永久无限循环 linear是线性变化 (step-end则是线性变化,直接输出结果)

代码如下:
CSS:

@-webkit-keyframes donghua{
0%{

-webkit-transform: rotate(0deg);
border:1px solid black;

}
50%{
-webkit-transform: rotate(360deg);
background:red;
border:1px solid blue;