css制作动漫
CSS 动画基础
CSS 动画通过 @keyframes 和 animation 属性实现。定义关键帧后，将其绑定到元素上即可触发动画效果。
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide-in 1s ease-out;
}常用动画属性
animation-name: 指定@keyframes名称。animation-duration: 动画时长（如2s）。animation-timing-function: 速度曲线（如ease-in-out）。animation-delay: 延迟启动时间。animation-iteration-count: 播放次数（infinite表示循环）。animation-fill-mode: 动画结束后的样式状态（如forwards保留最后一帧）。
复杂动画示例
结合多个属性实现闪烁和缩放效果：
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.box {
animation: pulse 2s infinite;
}动画性能优化
- 优先使用
transform和opacity，这些属性不会触发重排（reflow）。 - 避免频繁修改
width、height或margin等属性。 - 使用
will-change提示浏览器优化（如will-change: transform）。
响应式动画
通过媒体查询调整动画参数：
@media (max-width: 600px) {
.element { animation-duration: 0.5s; }
}动画库与工具
- Animate.css: 提供预定义动画类（如
animate__bounce）。 - GSAP: 更强大的 JavaScript 动画库，支持复杂时间轴控制。
示例：悬停旋转效果
.button {
transition: transform 0.3s;
}
.button:hover {
transform: rotate(360deg);
}
