当前位置：首页 > CSS

css 制作动图

2026-04-02 16:12:42CSS

CSS 动画制作方法

CSS 可以通过 @keyframes 和 animation 属性创建动态效果，以下是几种常见的实现方式：

基础关键帧动画

定义 @keyframes 规则并绑定到元素：

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.box {
  animation: slide 2s infinite alternate;
}

过渡效果（Transition）

通过状态变化触发平滑过渡：

.button {
  background: blue;
  transition: background 0.5s;
}
.button:hover {
  background: red;
}

逐帧动画

使用 steps() 函数实现精灵动画：

@keyframes walk {
  100% { background-position: -800px 0; }
}
.character {
  animation: walk 1s steps(8) infinite;
}

3D 变换动画

结合 transform-style 和透视效果：

.card {
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card:hover {
  transform: rotateY(180deg);
}

多属性联动动画

同时控制多个属性：

css 制作动图

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}
.element {
  animation: pulse 1.5s ease-in-out infinite;
}

性能优化建议

优先使用 transform 和 opacity 属性，这些属性不会触发重排
减少动画元素数量，复杂场景考虑使用 Canvas 或 WebGL
对移动设备使用 will-change: transform 提示浏览器优化
避免在滚动等高频事件中触发复杂动画

浏览器兼容方案

.box {
  -webkit-animation: slide 2s infinite; /* Safari/Chrome */
  -moz-animation: slide 2s infinite;    /* Firefox */
  animation: slide 2s infinite;
}

通过组合这些技术，可以创建从简单悬停效果到复杂关键帧动画的各种动态视觉效果。现代 CSS 还支持通过 @media (prefers-reduced-motion) 为运动敏感用户提供降级方案。

标签: css