css影片制作
CSS动画制作基础
CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将其应用到元素上控制播放方式。
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide-in 1s ease-out forwards;
}关键属性详解
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画时长（如2s）animation-timing-function: 速度曲线（ease/linear/cubic-bezier）animation-delay: 延迟开始时间animation-iteration-count: 重复次数（infinite表示无限循环）animation-direction: 播放方向（alternate表示往返交替）animation-fill-mode: 结束状态保持（forwards保留最后一帧）
复杂动画示例
创建多阶段动画时，使用百分比定义关键帧：
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
.box {
animation: pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}性能优化技巧
优先使用transform和opacity属性，这些属性不会触发重排：
- 避免动画过程中改变
width/height - 使用
will-change: transform提示浏览器优化 - 对静止元素应用
transform: translateZ(0)启用硬件加速
响应式动画方案
通过CSS变量实现自适应动画：
:root {
--anim-duration: 1s;
}
@media (max-width: 768px) {
:root {
--anim-duration: 0.5s;
}
}
.item {
animation: fade-in var(--anim-duration);
}与JavaScript交互
通过监听动画事件实现交互控制：
const element = document.querySelector('.animated');
element.addEventListener('animationend', () => {
console.log('动画结束');
});使用element.style.animationPlayState = 'paused'可动态暂停动画。
