CSS 设置动画

<style>
    @keyframes cssAnimation{
        0%{background: #00f;border-radius: 0%;}
        25%{background: #ff0;border-radius: 50%;}
        50%{background: #f0f;border-radius: 0%;}
        75%{background: #0ff;border-radius: 50%;}
        100%{background: #f00;border-radius: 0%;}
    }
        
    animation: name duration timing-function delay iteration-count direction animation-fill-mode;    // 动画的使用

    animation-name	规定需要绑定到选择器的 keyframe 名称。。
    animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
    animation-timing-function	规定动画的速度曲线。   //  https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp  
    animation-delay	规定在动画开始之前的延迟。
    animation-iteration-count	规定动画应该播放的次数，infinite是无限播放。
    animation-direction   	normal, 默认正常循环播放，alternate是反向播放。
    animation-fill-mode     none, 不改变默认行为; 
    forwards, 动画完成后保持最后一个属性值（在最后一个关键帧中定义）; 
    backwards, 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）; 
    both, 向前和向后填充模式都被应用。
</style>