css 动画效果

form 是开始 也可用0%代替 

to 是结束 100%可替

animation属性

-name 定义@keyframes名字

-duration 动画执行时长

-timing-function 动画时间函数

delay 动画执行延迟

iteration-count 动画执行次数可设置数字或者infinite来让他循环执行

direction 动画执行方向，默认是从开始到结束，可以设置成功reverse反向aiternate交替执行等

@keyframes rotate {

        from {

            transform: rotate(0deg);

            background-color: red

        }

        50% {

            transform: rotate(180deg);

        }

        to {

            transform: rotate(360deg);

            background-color: blue

        }

    }

.xxxxx{

animation :rotate 2s ease-in-out 0s infinte

}