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;（定义动画速度曲线）

animation-direction: normal;（定义动画是否反向播放）

animation-fill-mode: forwards;（定义动画再执行前后如何应用样式）

 @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;