当前位置：首页 > CSS

利用css3制作动画

2026-01-27 22:29:22CSS

CSS3 动画基础

CSS3 提供了 @keyframes 规则和 animation 属性来创建动画效果。@keyframes 定义动画的关键帧，animation 属性用于将动画应用到元素上。

定义关键帧：

@keyframes example {
  0%   { background-color: red; }
  50%  { background-color: yellow; }
  100% { background-color: green; }
}

应用动画：

div {
  animation-name: example;
  animation-duration: 4s;
}

常用动画属性

animation 是以下属性的简写：

animation-name：指定 @keyframes 动画名称
animation-duration：动画持续时间（如 2s）
animation-timing-function：动画速度曲线（如 ease、linear）
animation-delay：动画延迟时间
animation-iteration-count：动画播放次数（infinite 表示无限循环）
animation-direction：动画方向（normal、reverse、alternate）
animation-fill-mode：动画结束后元素的样式状态

简写示例：

div {
  animation: example 3s ease-in-out 1s infinite alternate;
}

变换动画（Transform）

结合 transform 属性创建位移、旋转、缩放等效果：

@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes scale {
  50% { transform: scale(1.5); }
}

过渡动画（Transition）

用于在元素状态改变时平滑过渡：

div {
  transition: all 0.3s ease-out;
}
div:hover {
  width: 200px;
  background: blue;
}

常用过渡属性：

transition-property：指定过渡的CSS属性
transition-duration：过渡持续时间
transition-timing-function：速度曲线
transition-delay：延迟时间

性能优化技巧

使用 will-change 属性提前告知浏览器哪些属性会变化：

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

优先使用 transform 和 opacity 创建动画，这些属性不会触发重排，性能更好。避免动画过程中改变盒模型属性（如 width、margin 等）。

复杂动画示例

创建弹跳效果：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}
.ball {
  animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

创建加载旋转动画：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
  border: 4px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #09f;
  width: 40px;
  height: 40px;
}

利用css3制作动画