css影片制作

CSS 动画制作基础

CSS 动画通过 @keyframes 和 animation 属性实现。以下是一个简单的闪烁动画示例：

@keyframes blink {  
  0% { opacity: 1; }  
  50% { opacity: 0; }  
  100% { opacity: 1; }  
}  
.element {  
  animation: blink 2s infinite;  
}  

• @keyframes 定义动画关键帧（从 0% 到 100% 的状态变化）。
• animation 是简写属性，包含动画名称、时长、循环方式等。

常用动画属性

• animation-name: 指定 @keyframes 名称。
• animation-duration: 动画时长（如 2s）。
• animation-timing-function: 速度曲线（如 ease-in-out）。
• animation-delay: 延迟启动时间。
• animation-iteration-count: 循环次数（infinite 表示无限循环）。

复杂动画示例：移动 + 旋转

@keyframes moveAndRotate {  
  0% { transform: translateX(0) rotate(0deg); }  
  50% { transform: translateX(100px) rotate(180deg); }  
  100% { transform: translateX(0) rotate(360deg); }  
}  
.box {  
  animation: moveAndRotate 3s ease-in-out infinite;  
}  

动画性能优化

• 优先使用 transform 和 opacity，这些属性不会触发重绘（性能更高）。
• 避免频繁修改 width、height 或 margin。
• 使用 will-change 提示浏览器优化（如 will-change: transform;）。

工具与框架推荐

• Animate.css: 预置多种动画效果的 CSS 库，直接添加类名即可使用。
• GreenSock (GSAP): 更强大的 JavaScript 动画库，适合复杂场景。
• CSS Triggers: 查询属性触发的渲染流程，帮助优化性能。

通过组合关键帧和动画属性，可以创建从简单到复杂的动态效果。