玩转CSS，轻松搞定加载中动画！

前端

2023-03-04 03:20:06

CSS动画的魔力：提升你的网页体验

在网页设计的世界里，流畅迷人的动画能够提升用户体验，让你的网站脱颖而出。CSS 提供了强大的动画功能，让你轻松实现各种炫目的效果，为你的网页注入活力。

@keyframe：动画的关键

@keyframe 是 CSS 中定义动画关键帧的规则。这些关键帧决定了动画的开始和结束状态，以及中间的过渡效果。每个关键帧包含一个百分比值和一组 CSS 样式，控制元素的颜色、位置、旋转等属性。

animation：赋予动画生命

animation 属性控制动画的执行方式。它指定动画的名称、持续时间、速度函数和重复次数。通过 animation 属性，你可以调整动画的播放速度、方向和次数，打造出恰到好处的效果。

实战演示：三个小动画

以下代码示例展示了如何使用 CSS 实现三个加载中的小动画：

/* 定义动画关键帧 */
@keyframes loading1 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 定义动画执行方式 */
.loading1 {
  animation: loading1 1s infinite alternate;
}

/* 定义动画关键帧 */
@keyframes loading2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 定义动画执行方式 */
.loading2 {
  animation: loading2 1s infinite alternate;
}

/* 定义动画关键帧 */
@keyframes loading3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 定义动画执行方式 */
.loading3 {
  animation: loading3 1s infinite alternate;
}