css制作动画
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的中间状态，animation 控制动画的播放方式。
@keyframes example {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
.element {
animation: example 3s ease-in-out infinite;
}关键属性说明
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease,linear）。animation-delay: 动画延迟时间（如1s）。animation-iteration-count: 播放次数（如infinite）。animation-direction: 播放方向（如alternate往返播放）。
过渡动画（Transition）
CSS 过渡用于在元素状态变化时平滑过渡效果，常用属性包括：
transition-property: 指定过渡属性（如all或opacity）。transition-duration: 过渡持续时间。transition-timing-function: 速度曲线。transition-delay: 过渡延迟。
.button {
background: blue;
transition: background 0.5s ease;
}
.button:hover {
background: red;
}动画性能优化
- 优先使用
opacity和transform属性，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width/height）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
复杂动画示例
结合 transform 和 @keyframes 实现旋转与缩放：
@keyframes spin-scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.5); }
100% { transform: rotate(360deg) scale(1); }
}
.box {
animation: spin-scale 2s linear infinite;
}动画事件监听
通过 JavaScript 监听动画事件：
animationstart: 动画开始。animationend: 动画结束。animationiteration: 每次迭代触发。
const element = document.querySelector('.box');
element.addEventListener('animationend', () => {
console.log('Animation finished');
});
