css动漫制作教程
CSS动画制作基础
CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将其绑定到元素并设置持续时间、延迟等参数。
/* 定义关键帧 */
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 应用动画 */
.element {
animation: slide-in 1s ease-out;
}常用动画属性组合
animation是以下属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画持续时间（如2s）animation-timing-function: 速度曲线（ease, linear等）animation-delay: 开始前延迟animation-iteration-count: 播放次数（infinite表示无限循环）animation-direction: 播放方向（alternate表示往返播放）
复杂关键帧控制
百分比关键帧允许定义更细致的动画阶段：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}动画性能优化技巧
使用transform和opacity属性可触发GPU加速，避免使用left/top等影响布局的属性。添加will-change属性预先告知浏览器：
.animated-item {
will-change: transform, opacity;
}动画事件监听
JavaScript可监听动画事件：
const element = document.querySelector('.box');
element.addEventListener('animationend', () => {
console.log('动画结束');
});动画库扩展方案
现有CSS动画库可快速实现复杂效果：
- Animate.css：预置弹跳、闪烁等常用动画类
- Magic.css：提供特殊变形效果
- Hover.css：专注悬停交互效果
通过添加类名即可调用：
<div class="animate__animated animate__bounce"></div>响应式动画设计
结合媒体查询实现自适应动画：
@media (max-width: 768px) {
.mobile-animation {
animation: shrink 0.5s;
}
}
