CSS动画大全：30个css动画效果，持续更新中...

2023-10-15 07:27:38

CSS动画是网页设计中的一种常见技术，它可以用来为网页元素添加各种视觉效果。CSS动画使用CSS样式表来定义动画效果，可以通过CSS属性来控制动画的播放速度、方向、持续时间等。

CSS动画有许多不同的类型，包括：

淡入/淡出：元素逐渐显示或隐藏。
滑动：元素在两个位置之间移动。
旋转：元素围绕一个中心点旋转。
缩放：元素变大或变小。
倾斜：元素向左或向右倾斜。
翻转：元素在水平或垂直方向上翻转。

这些只是CSS动画的几种常见类型，还有许多其他类型的动画效果可以使用。您可以根据自己的需要选择合适的动画效果，并使用CSS样式表来定义动画的播放方式。

以下是30个CSS动画效果的示例，您可以复制粘贴这些代码并修改以适应您的项目需求：

淡入：

.fade-in {
  animation: fade-in 1s ease-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

淡出：

.fade-out {
  animation: fade-out 1s ease-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

滑动从左到右：

.slide-left-to-right {
  animation: slide-left-to-right 1s ease-in-out;
}

@keyframes slide-left-to-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

滑动从右到左：

.slide-right-to-left {
  animation: slide-right-to-left 1s ease-in-out;
}

@keyframes slide-right-to-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

旋转：

.rotate {
  animation: rotate 1s infinite linear;
}

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

缩放：

.scale {
  animation: scale 1s ease-in-out;
}

@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

倾斜：

.tilt {
  animation: tilt 1s ease-in-out;
}

@keyframes tilt {
  from {
    transform: skewX(0deg);
  }
  to {
    transform: skewX(10deg);
  }
}

翻转：

.flip {
  animation: flip 1s ease-in-out;
}

@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}