css制作教程动画
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。定义关键帧后，将动画绑定到元素上即可触发动态效果。
定义关键帧
使用 @keyframes 指定动画序列，从初始状态到结束状态：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}或通过百分比定义多阶段动画：
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}应用动画
通过 animation 属性将动画绑定到元素：
.element {
animation: fadeIn 2s ease-in-out infinite;
}fadeIn：动画名称2s：持续时间ease-in-out：速度曲线（缓动效果）infinite：循环次数（可选1、2等）
常用动画属性
animation-delay：延迟启动时间（如1s）animation-direction：播放方向（normal、reverse、alternate）animation-fill-mode：动画结束后的样式保留（如forwards保持最后一帧）
示例：弹跳效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 0.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}cubic-bezier 自定义缓动曲线，模拟物理弹跳。
进阶技巧
- 复合动画：组合多个动画效果：
.box { animation: fadeIn 1s, slide 2s 1s; } - 硬件加速：使用
transform和opacity避免性能问题。 - 媒体查询适配：在不同屏幕尺寸下调整动画参数。
工具推荐
- Animate.css：预置动画库，直接引入类名即可使用。
- CSS Gradient Animator：生成渐变背景动画。
通过灵活组合关键帧和属性，可实现从简单过渡到复杂交互的动画效果。
