css动漫制作
CSS 动画制作基础
CSS 动画通过 @keyframes 和 animation 属性实现。@keyframes 定义动画关键帧，animation 控制动画播放方式。
@keyframes example {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: example 2s ease-in-out infinite;
}关键属性说明
animation-name：指定@keyframes名称animation-duration：动画持续时间（如2s）animation-timing-function：速度曲线（ease/linear/cubic-bezier()）animation-delay：延迟启动时间animation-iteration-count：播放次数（数字或infinite）animation-direction：播放方向（normal/reverse/alternate）
复杂动画示例
实现元素弹跳效果：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
.ball {
animation: bounce 0.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}性能优化建议
- 优先使用
transform和opacity属性，它们不会触发重排 - 避免在动画中使用
width/height/margin等属性 - 使用
will-change: transform;提示浏览器优化 - 减少同时运行的动画数量
动画事件控制
通过 JavaScript 监听动画事件：
const element = document.querySelector('.animated');
element.addEventListener('animationstart', () => {
console.log('动画开始');
});
element.addEventListener('animationend', () => {
console.log('动画结束');
});响应式动画技巧
结合媒体查询实现不同屏幕尺寸的动画效果：
@media (max-width: 600px) {
.element {
animation: mobile-anim 1s;
}
}浏览器兼容性处理
添加前缀确保兼容旧版浏览器：
.element {
-webkit-animation: example 2s;
-moz-animation: example 2s;
animation: example 2s;
}动画调试工具
- Chrome DevTools 的 Animation Inspector
- Firefox 的 Animation Panel
- 在线工具如 CSS Animate 可视化编辑器
进阶效果实现
使用 CSS 变量动态控制动画：
:root {
--anim-duration: 0.5s;
}
.element {
animation: spin var(--anim-duration) linear;
}
