css animation 动画属性
animation
// 要绑定的关键帧规则名称
animation-name: slidein;// 定义动画完成一个周期所需的时间，秒或毫秒
animation-duration: 3s;// 定义动画速度曲线
animation-timing-function: ease;// 定义动画开始前的延迟时间
animation-delay: 1s;// 定义动画播放次数：n 具体次数；infinite：无限循环；
animation-iteration-count: infinite;// 定义动画是否反向播放
animation-direction: normal;// 定义动画再执行前后如何应用样式
animation-fill-mode: forwards;// 控制动画播放状态：running 正在播的；paused 暂停；
animation-play-state: running;// 简写 animation 属性
// animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-timing-function: ease;（定义动画速度曲线）
| ease | （默认）慢-快-慢 |
| linear | 匀速 |
| ease-in | 慢开始 |
| ease-out | 慢结束 |
| ease-in-out | 满开始、慢结束 |
| cubic-bezier(n, n, n, n) | 自定义曲线 |
animation-direction: normal;（定义动画是否反向播放）
| normal | 正常播放 |
| reverse | 反向播放 |
| alternate | 轮流正反向 |
| alternate-reverse | 先反向、后正向 轮流 |
animation-fill-mode: forwards;（定义动画再执行前后如何应用样式）
| none | （默认）不应用任何样式 |
| forwards | 保持最后一帧样式 |
| backwards | 应用第一帧样式（考虑 delay） |
| both | 同时应用 forwards 和 backwards |
@keyframes 规则
// 定义动画的关键帧
@keyframes slidein{from {transform: translateX(0%);}50% {transform: translateX(50%);opacity: 0.5;}to {transform: translateX(100%)opacity: 1;}
}性能考虑
优先使用 transform 和 opacity 属性进行动画，这些属性可以由浏览器高效处理；
避免动画过多元素，可能导致性能问题；
使用 will-change 属性预先告知浏览器哪些元素会变化；
.element {will-change: transform, opacity;
}CSS will-change 属性详解
是一个性能你优化属性，它允许开发者提前告知浏览器哪些元素属性即将发生变化，让浏览器可以提前做好优化准备。
/* 基本语法 */
will-change: auto | <animateable-feature> | scroll-position | contents;| auto | 默认值，表示浏览器不会做任何特殊优化 |
| ps. transform opacity ... | 特定属性，指即将变化的CSS属性名称 |
| scroll-position | 表示元素的滚动位置即将改变 |
| contents | 表示元素的内容即将改变 |