css动画制作
CSS动画制作方法
使用@keyframes规则定义动画序列，通过animation属性将动画应用到元素上。以下是一个基础示例：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}关键帧定义
在@keyframes中可以使用百分比或from/to关键词定义动画阶段。百分比允许更精细的控制：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}动画属性详解
animation是以下子属性的简写：
animation-name: 关键帧名称animation-duration: 动画时长（如2s）animation-timing-function: 速度曲线（如ease,linear）animation-delay: 延迟开始时间animation-iteration-count: 重复次数（infinite表示无限循环）animation-direction: 播放方向（alternate表示往返播放）animation-fill-mode: 动画结束后的样式保留
性能优化建议
优先使用transform和opacity属性制作动画，这些属性不会触发重排：
@keyframes slide {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}避免在动画中使用width、height、margin等会引发布局变化的属性。
复合动画示例
组合多个变换效果创建复杂动画：
@keyframes spinAndGrow {
0% {
transform: rotate(0deg) scale(0.5);
opacity: 0;
}
100% {
transform: rotate(360deg) scale(1);
opacity: 1;
}
}动画事件监听
通过JavaScript监听动画事件：
element.addEventListener('animationstart', () => {
console.log('动画开始');
});
element.addEventListener('animationend', () => {
console.log('动画结束');
});响应式动画
使用CSS变量使动画参数可动态调整：
:root {
--anim-duration: 1s;
}
.element {
animation: fadeIn var(--anim-duration);
}通过媒体查询调整不同设备的动画效果：
@media (max-width: 768px) {
.element {
animation-duration: 0.5s;
}
}
