当前位置：首页 > CSS

利用css3制作动画

2026-01-08 20:04:08CSS

CSS3 动画基础

CSS3 通过 @keyframes 规则和 animation 属性实现动画效果。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、循环次数等）。

定义关键帧

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

from 和 to 分别表示动画的起始和结束状态，也可用百分比（如 0%, 50%, 100%）定义多阶段动画。

应用动画

利用css3制作动画

.element {
  animation: slide-in 1s ease-in-out 0.5s 3 alternate;
}

简写属性 animation 包含以下值（按顺序）：
- slide-in: 动画名称。
- 1s: 持续时间。
- ease-in-out: 速度曲线（缓动函数）。
- 0.5s: 延迟时间。
- 3: 循环次数（infinite 表示无限循环）。
- alternate: 方向（往返播放）。

常用动画属性

animation-name: 关键帧名称。
animation-duration: 动画时长（如 2s）。
animation-timing-function: 缓动函数（如 linear, ease, cubic-bezier(0.1, 0.7, 1, 0.1)）。
animation-delay: 延迟启动时间。
animation-iteration-count: 循环次数。
animation-direction: 播放方向（normal, reverse, alternate）。
animation-fill-mode: 动画结束后的样式（如 forwards 保留最后一帧）。

示例：淡入效果

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-element {
  animation: fade-in 2s ease-out forwards;
}

复杂动画：多关键帧

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: bounce 0.5s infinite;
}