css制作动漫
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式。
/* 定义关键帧 */
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
/* 应用动画 */
.element {
animation: slide 2s ease-in-out infinite;
}常用动画属性
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease,linear）。animation-delay: 动画延迟时间。animation-iteration-count: 播放次数（如infinite）。animation-direction: 播放方向（如alternate）。
示例：跳动效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 1s ease infinite;
}示例：旋转加载动画
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
}复杂动画组合
通过组合多个变换（transform）和透明度（opacity）实现复杂效果：
@keyframes fadeAndScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.box {
animation: fadeAndScale 1.5s cubic-bezier(0.39, 0.58, 0.57, 1);
}性能优化建议
- 优先使用
transform和opacity，这些属性不会触发重排。 - 避免频繁触发重绘的属性（如
box-shadow）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
工具推荐
- Animate.css: 提供预定义的 CSS 动画库。
- CSS Animation Generator: 在线工具快速生成动画代码。
- Greensock (GSAP): 更强大的动画库（需 JavaScript）。
