动画制作css
使用 CSS 制作动画
CSS 动画可以通过 @keyframes 规则和 animation 属性实现，适用于元素的状态变化、过渡效果等。以下是实现 CSS 动画的核心方法：
定义关键帧动画
通过 @keyframes 定义动画的起始和结束状态，以及中间的关键帧。动画名称可自定义，例如 slide：
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}应用动画到元素
使用 animation 属性将动画绑定到目标元素，需指定动画名称、持续时间等参数：
.box {
animation: slide 3s ease-in-out infinite;
}slide：动画名称，与@keyframes定义一致。3s：动画周期时长。ease-in-out：速度曲线（缓动效果）。infinite：无限循环，可替换为具体次数（如2）。
常用动画属性
animation-delay：延迟动画开始时间（如1s）。animation-fill-mode：控制动画结束后的状态（如forwards保留最后一帧）。animation-direction：设置播放方向（如alternate来回播放）。
示例：淡入淡出效果
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fade 2s ease-in;
}CSS 过渡动画
对于简单的属性变化，可使用 transition 实现平滑过渡：
.button {
background: blue;
transition: background 0.5s ease;
}
.button:hover {
background: red;
}transition监听的属性（如background）。0.5s：过渡时长。ease：缓动函数。
性能优化建议
- 优先使用
transform和opacity，这两个属性不会触发重排（reflow），性能更高。 - 避免过多使用
box-shadow或filter，可能导致卡顿。 - 使用
will-change提示浏览器优化（如will-change: transform）。
通过组合关键帧和过渡，可以创建复杂的交互效果，如加载动画、菜单滑动等。
