css动画

教程：https://github.com/chokcoco/iCSS/issues/141

2d 动画

/* 动画名称 动画时间 动画速度 动画次数 */
animation: move 2s linear infinite; 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

delay时间还能为负值，用于提前进行动画；

其他的2d的属性

will-change: transform; 告诉浏览器，这个元素即将发生动画，让浏览器提前做好优化准备；

animation-fill-mode: forwards/backwards/both/none; 动画结束后，保持动画结束时的状态/动画开始时的状态/动画开始和结束时的状态/不保持动画结束时的状态；

others

this.Elements = document.querySelectorAll('xxx')
this.Elements.forEach(element => {
    // 直接往里面添加属性
    element.style.animation = 'move 2s linear infinite';
    element.style.animationFillMode = 'forwards';
    // 添加动画类
    element.classList.add('move');
})

transform: translateZ(0); /* 启用硬件加速 */

3d 动画

核心属性： transform-style: preserve-3d; perspective: 1000px;

其他的3d属性

backface-visibility: hidden; 是一个 CSS 属性，用于控制在 3D 转换中元素的背面是否可见。它在实现 3D 效果时非常有用，尤其是在处理元素翻转或旋转时，可以帮助避免视觉上的闪烁或不必要的背面显示。