css3制作简单动画

使用 @keyframes 定义动画

通过 @keyframes 规则定义动画的关键帧，指定动画从开始到结束的样式变化。

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

应用动画到元素

使用 animation 属性将动画绑定到元素，需指定动画名称、持续时间等参数。

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

控制动画播放方向

通过 animation-direction 属性设置动画是否反向播放或交替播放。

div {
  animation-direction: alternate; /* 动画交替反向播放 */
}

延迟动画开始时间

使用 animation-delay 属性延迟动画的启动时间。

div {
  animation-delay: 2s; /* 延迟2秒后开始 */
}

设置动画速度曲线

通过 animation-timing-function 调整动画的速度曲线（如匀速、先快后慢等）。

div {
  animation-timing-function: ease-in-out; /* 动画以慢速开始和结束 */
}

简写动画属性

animation 属性支持简写形式，合并多个参数。

div {
  animation: example 4s ease-in-out 2s infinite alternate;
}

透明度渐变示例

结合 opacity 实现淡入淡出效果。

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in {
  animation: fade 2s;
}