让你的网页动起来：探索 CSS 动画的魅力

前端

2023-12-15 02:53:38

嘿，大家好！我是 [你的名字]，欢迎来到我的技术博客。今天，我们踏上一次激动人心的旅程，探索 CSS 动画的奇妙世界。

CSS 动画为我们提供了超出简单过渡的强大工具，让我们能够为网页元素注入生机和活力。准备好迎接一场视觉盛宴了吗？那么，我们开始吧！

动画 vs. 过渡

让我们从了解动画和过渡之间的关键区别开始。transition 属性允许我们在两个状态之间实现平滑的过渡，而 animation 则为我们提供了创建更为复杂的动画的自由。

想象一下，你想让一个按钮在点击时闪烁。使用 transition，你可以指定按钮从初始颜色变为另一种颜色的过渡时间和效果。但是，如果你想让按钮在闪烁后放大并旋转，那么你需要使用 animation。

CSS 动画的语法

CSS 动画的语法很简单：

animation-name: <动画名称>;
animation-duration: <动画持续时间>;
animation-iteration-count: <动画重复次数>;
animation-timing-function: <动画缓动函数>;
animation-delay: <动画延迟时间>;

animation-name ：指定动画的名称。
animation-duration ：定义动画的持续时间。
animation-iteration-count ：指定动画重复的次数（无限为 infinite）。
animation-timing-function ：控制动画的加速和减速方式。
animation-delay ：指定动画开始前延迟的时间。

创建一个简单的动画

让我们通过一个简单的示例来体验一下 CSS 动画的威力。我们创建一个 div，让它在悬停时向右滑动：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: slide-right;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes slide-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}