当前位置：首页 > CSS

利用css3制作动画

2026-04-01 00:55:00CSS

使用 CSS3 制作动画

CSS3 提供了强大的动画功能，可以通过 @keyframes 和 animation 属性实现复杂的动画效果。以下是实现 CSS3 动画的核心方法：

定义关键帧动画

通过 @keyframes 规则定义动画的中间状态。动画从 0%（起始状态）到 100%（结束状态）逐步变化。

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

应用动画到元素

使用 animation 属性将定义的关键帧动画绑定到目标元素。可以设置动画的持续时间、延迟、播放次数等。

.element {
  animation-name: example;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

简写属性

animation 属性支持简写形式，将多个参数合并为一行：

.element {
  animation: example 2s ease-in-out 0.5s infinite alternate;
}

动画属性详解

animation-name：指定 @keyframes 动画的名称。
animation-duration：动画完成一个周期的时间（如 2s）。
animation-timing-function：动画速度曲线（如 ease、linear、cubic-bezier()）。
animation-delay：动画开始前的延迟时间。
animation-iteration-count：播放次数（如 infinite 表示无限循环）。
animation-direction：播放方向（如 alternate 表示往返播放）。
animation-fill-mode：动画执行前后的样式状态（如 forwards 保留结束状态）。
animation-play-state：控制动画暂停或播放（如 paused）。

示例：悬停放大效果

.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

示例：旋转加载动画

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

.loader {
  animation: spin 1s linear infinite;
}

浏览器兼容性

CSS3 动画在现代浏览器中广泛支持。对于旧版本浏览器（如 IE9 及以下），需添加前缀：

利用css3制作动画

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

通过灵活组合 @keyframes 和 animation 属性，可以实现平移、旋转、缩放、淡入淡出等丰富效果。

标签: 动画