当前位置：首页 > CSS

css帧动画制作视频

2026-01-12 17:51:48CSS

CSS帧动画制作方法

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

定义关键帧 使用@keyframes定义动画序列，从0%到100%描述每一帧的状态：

@keyframes slidein {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

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

.element {
  animation: slidein 3s ease-in-out infinite;
}

常用动画属性

animation-name: 指定@keyframes名称
animation-duration: 动画周期时长（如2s）
animation-timing-function: 速度曲线（ease/linear等）
animation-delay: 动画开始前的延迟
animation-iteration-count: 播放次数（infinite表示无限循环）
animation-direction: 播放方向（alternate表示往返播放）
animation-fill-mode: 动画结束后的样式状态

复合写法示例

.box {
  animation: bounce 1.5s ease-in-out 0.5s 3 alternate forwards;
}

性能优化建议

使用transform和opacity属性制作动画，这些属性不会触发重排。避免使用left/top等影响布局的属性。硬件加速可通过添加以下代码实现：

.element {
  will-change: transform;
  transform: translateZ(0);
}

复杂动画组合

多个动画可通过逗号分隔同时应用：

.element {
  animation: 
    fadeIn 2s ease-out,
    slideUp 1.5s ease-in-out;
}

响应式动画技巧

结合CSS变量和媒体查询实现自适应动画：

css帧动画制作视频

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