css帧动画制作视频

CSS帧动画制作方法

CSS帧动画通过@keyframes规则和animation属性实现，以下是具体步骤：

定义关键帧 使用@keyframes定义动画序列，从0%到100%描述各阶段样式变化：

@keyframes slideIn {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: translateX(0); opacity: 1; }
}

应用动画 通过animation属性绑定动画到元素：

.element {
  animation: slideIn 2s ease-in-out 1s infinite alternate;
}

参数依次为：动画名称、持续时间、缓动函数、延迟时间、迭代次数、方向。

控制播放状态 使用animation-play-state暂停或继续：

.element:hover {
  animation-play-state: paused;
}

性能优化技巧

使用transform和opacity属性触发GPU加速，避免使用left/top等属性。优先使用will-change预声明变化属性：

.element {
  will-change: transform, opacity;
}

复合动画示例

组合多个动画实现复杂效果：

@keyframes fade {
  to { opacity: 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.element {
  animation: 
    fade 3s linear infinite,
    spin 1.5s ease-in-out infinite;
}

响应式动画技巧

通过CSS变量动态调整动画参数：

:root {
  --anim-duration: 1s;
}
@media (max-width: 768px) {
  :root {
    --anim-duration: 0.5s;
  }
}
.element {
  animation-duration: var(--anim-duration);
}

浏览器兼容方案

添加前缀确保跨浏览器支持：

@-webkit-keyframes example {
  /* ... */
}
.element {
  -webkit-animation: example 2s;
          animation: example 2s;
}

通过以上方法可以创建从简单过渡到复杂交互的各类帧动画效果。