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	表示元素的内容即将改变