【CSS】深入理解 CSS 动画

最新推荐文章于 2025-07-23 14:12:41 发布

读心悦

最新推荐文章于 2025-07-23 14:12:41 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：深入浅出CSS 文章标签： css 前端

CSS 动画是一种在网页上创建动态效果的方式，它允许你改变元素的样式随时间变化。CSS 动画主要通过 @keyframes 规则以及 animation 属性来实现。

@keyframes 规则用于创建动画。在 @keyframes 中，你需要指定动画的名称，并定义动画在不同时间点的样式。

例如，一个简单的淡入淡出动画可以这样定义：

@keyframes fadeInOut {
   
   
  0% {
   
   opacity: 0;}
  50% {
   
   opacity: 1;}
  100% {
   
   opacity: 0;}
}

在这个例子中，动画名称为 fadeInOut。开始时（0%），元素的透明度为 0（完全透明）。在中间（50%），元素的透明度为 1（完全不透明）。结束时（100%），元素的透明度再次为 0（完全透明）。

animation 属性用于应用 @keyframes 动画。这个属性可以包含多个值，以空格分隔，这些值定义了动画的各种特性。

例如，要应用上面的 fadeInOut 动画，你可以这样写：

div {
   
   
  width: 100px;
  height: 100px;
  background: red;
  animation: fadeInOut 2s ease-in-out infinite;
}

在这个

新学期VIP享超值加赠