激发灵感，get掘金“彩蛋”！从这5个css3动画开始，让你的网页创意十足！

相信大家都经历过，在某一个网站、软件上，发现了一处与产品无关的小彩蛋。当时的我，心里仿佛发现了什么不得了的东西。抱着分享的心态，我想用我熟悉的小知识，把一些好玩的小彩蛋告诉你，顺便还能学到更有趣的css3动画知识。

先来了解一下CSS3动画的定义：

CSS3动画是一种可以帮助您在网页上创建动画效果的CSS技术。您可以使用它来创建各种各样的动画，从简单的淡入淡出效果到更复杂的动画，例如旋转、缩放和移动。

本篇文章里，我来介绍一下5个最受欢迎的CSS3动画：

1. 淡入淡出动画： 这种动画效果会让元素逐渐出现或消失。您可以使用它来创建简单的提示框或滑块效果。

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

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

2. 旋转动画： 这种动画效果会让元素绕着中心点旋转。您可以使用它来创建加载指示器或旋转木马效果。

.rotate {
  animation: rotate 1s infinite;
}

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

3. 缩放动画： 这种动画效果会让元素放大或缩小。您可以使用它来创建按钮的悬停效果或缩放图像效果。

.scale {
  animation: scale 1s;
}

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

4. 移动动画： 这种动画效果会让元素从一个位置移动到另一个位置。您可以使用它来创建滑块效果或导航菜单效果。

.move {
  animation: move 1s;
}

@keyframes move {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

5. 组合动画： 您可以将多个动画组合起来，以创建更复杂的动画效果。例如，您可以将淡入淡出动画和旋转动画组合起来，以创建旋转并逐渐出现的元素。

.combo {
  animation: combo 1s;
}

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

使用这些动画效果，你就可以轻松地创建出让人眼前一亮的网页动画效果。更多有趣的动画，大家可以去掘金上探索更多！