CSS动画css动画的使用方法，这里做了简单的总结，并给出了一个示例。我们使用keyframes来定义关键帧，并在选择器

组成：
- 用于指定动画开始、结束以及中间点样式的关键帧
- 描述动画的样式规则
创建：
- 使用@keyframes创建：
  - 先绑定到一个要应用动画的元素容器的选择器上：
    - animation: name duration timing-function delay iteration-count direction fill-mode play-state【加粗的必须要写】
      - name：绑定到选择器上的关键帧名称
      - duration：动画一次播放时间
      - timing-function：动画完成一个周期的方式
        
        ease：低速->加快->减慢->停止
        
        linear：匀速
        
        ease-in：低速开始
        
        ease-out：低速结束
        
        ease-in-out：低速开始、结束
        
        steps(int,start|end)
        
        start：直接开始；end：戛然而止
      - delay：动画播放前的延迟时间
      - iteration-count：动画播放次数
        
        次数
        
        infinite：无限循环
      - direction：动画是否该轮流反向播放
        
        normal：正常播放
        
        reverse：反向播放
        
        alternate：奇数次正向播放，偶数次反向播放
        
        alternate-reverse：偶数次正向播放，奇数次反向播放
      - fill-mode：动画一次播放完后应用的样式
        
        none
        
        forwards：保持动画结束状态
        
        backwards：应用动画初始状态
        
        both
      - play-state：动画是否正在允许或已暂停
        
        paused：暂停
        
        running：正在运行
  - 创建关键帧：
    - @keyframes 动画名称{}
我的实践：
- 代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS animation</title>
    <style>
        /* 定义一个slideFade的关键帧动画 */
        @keyframes slideFade {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(100px); /* 平移100像素 */
                opacity: 0; /* 透明度变为0 */
            }
        }
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            color: rgb(203, 211, 47);
            background-color: rgb(209, 138, 45);
            animation: slideFade 5s ease-in-out 5s infinite alternate; 
        }
    </style>
</head>
<body>
    <div>新的 one week</div>
</body>
</html>

参考资源：菜鸟教程--CSS动画