CSS动画

动画的原理：

• 视觉暂留作用
• 画面逐渐变化

动画的作用

• 增强用户体验
• 引起用户注意、
• 对操作进行反馈
• 掩饰（loading图）

动画的类型

• transition 补间动画
• keyframe 关键帧动画
• 逐帧动画

---

transition 补间动画

可以监测的内容

• 平移
• 旋转
• 缩放
• 透明度
• 其他的线性变化

transition: property 1s , all 3s ;/*设置监听的属性和动画时常*/
transition-delay :1s ;/*设置延迟时间*/
transition-timing-function: ease-in-out; /*设置动画进度曲线*/

---

keyframe 关键帧动画

相当于多个补间动画，可以与元素状态的变化无关
定义更加灵活

 .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* animation-direction: reverse; *//*指定动画方向*/
            /* animation-fill-mode: forwards; *//*保留最终状态*/
            animation-iteration-count: infinite;/*循环次数*/
            /* animation-play-state: paused; *//*暂停*/
        }
        @keyframes run{
            0%{
                width: 100px;
            }
            50%{
                width: 800px;
            }
            100%{
                width: 100px;
            }
        }

---

逐帧动画

适用于无法补间计算的动画，需要很多图片
仍然是使用关键帧的技术实现的
使用steps（1）//关键帧之间的间隔是1帧，不要补间

---

tips：box-shadow 中的动画性能很差