原生js添加动画效果

原生js添加动画效果

html

这个图片是使用阿里图标需要下载

<div class="content">
        <div class="contAnimation"><i class="iconfont icon-jiazai inco"></i></div>
    </div>

css

.content{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: pink;
}
@keyframes loading{
自定义写法：
    /* 0%{transform: rotate(0deg);}
    50%{transform: rotate(120deg);}
    70%{transform: rotate(30deg);}
    100%{transform: rotate(360deg);} */
传统写法：
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
.contAnimation{
    position:absolute;
    top: 50%;
    left: 50%; 
    transform:translate(-50%,-50%);
    @include webkit(transform,rotate(0deg));
    animation:loading 1s linear infinite ;   //这个是简写形式
}