animation实现简单的loading的动画

转圈的效果：

方法实现一：

.loading_circle1 {
    width: 48px;
    height: 48px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: green;
    border-radius: 50%;
    animation: loading 1s linear infinite;
    overflow: hidden;
}
@keyframes loading {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg);}
}
<div class='loading_circle1'></div>

效果如下：
方法实现二：
使用mask-image的实现，但只有webkit内核的浏览器支持mask属性，所以需考虑到兼容性问题
这里主要使用到了conic-gradient的锥形渐变与radial-gradient径向渐变 - 实现

// 使用mask的形式
.loading_circle2 {
	width: 48px;
    height: 48px;
	border-radius: 50%;
    background: conic-gradient(deepskyblue, 30%, white); // 锥形渐变实现一个半圆的效果
    --mask: radial-gradient(closest-side, transparent 75%, black 76%); // 径向渐变实现一个蒙版的效果
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: loading 1s linear infinite reverse;
}
@keyframes loading {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg);}
}
<div class='loading_circle2'></div>

效果如下：

mask-image的使用：点击跳转查看

文字加载二：

span {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
span::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    // step-end 会使 keyframes 动画到了定义的关键帧处直接突变，并没有变化的过程
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
<div>
	正在加载中<span></span>
</div>

效果如下图：

此方法来自张鑫旭《css世界》的书籍，是本很不错的css认知书籍！强力安利，对css的建立全新的认知
点击进入到作者的博客

animation属性值

[ animation-name ]：名称，@keyframes name
[ animation-duration ]：持续时间 3s
[ animation-timing-function ]：过渡类型
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

[ animation-delay ]：延迟的时间
[ animation-iteration-count ]：循环次数
none：默认值
infinite ：无限循环
[ animation-direction ]：是否反向运动
normal：正常方向 在这里插入代码片
alternate：正常与反向交替
[ animation-fill-mode} : 停止之后的属性
none：默认值
forwards：第一帧中的状态
backwards： 保持最后一帧的状态
both：表示上面两者模式都被应用