css3动画animation案例
  CSS3动画是一种非常流行的Web设计技术，它可以让网页更加生动、有趣和吸引人。在这篇文章中，我们将列举10个CSS3动画案例，这些案例都非常有趣和实用，可以帮助你更好地了解CSS3动画的应用。
 
  1. 旋转动画
 
  旋转动画是CSS3动画中最基本的一种，它可以让元素在页面上旋转。这种动画非常简单，只需要使用CSS3的transform属性即可实现。例如：
 
  ```
  .rotate {
    animation: rotate 2s linear infinite;
  }
 
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  ```
 
  2. 缩放动画
 
  缩放动画可以让元素在页面上缩放，这种动画同样也是使用CSS3的transform属性实现。例如：
 
  ```
  .scale {
    animation: scale 2s linear infinite;
  }
 
  @keyframes scale {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.5);
    }
  }
  ```
 
  3. 淡入淡出动画
 
  淡入淡出动画可以让元素在页面上逐渐出现或消失，这种动画同样也是使用CSS3的opacity属性实现。例如：
 
  ```
  .fade {
    animation: fade 2s linear infinite;
  }
 
rotate属性  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  ```
 
  4. 移动动画
 
  移动动画可以让元素在页面上移动，这种动画同样也是使用CSS3的transform属性实现。例如：
 
  ```
  .move {
    animation: move 2s linear infinite;
  }
 
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100px);
    }
  }
  ```
 
  5. 翻转动画
 
  翻转动画可以让元素在页面上翻转，这种动画同样也是使用CSS3的transform属性实现。例如：
 
  ```
  .flip {
    animation: flip 2s linear infinite;
  }
 
  @keyframes flip {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(180deg);
    }
  }
  ```
 
  6. 弹跳动画
 
  弹跳动画可以让元素在页面上弹跳，这种动画同样也是使用CSS3的transform属性实现。例如：
 
  ```
  .bounce {
    animation: bounce 2s linear infinite;
  }
 
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  ```
 
  7. 闪烁动画
 
  闪烁动画可以让元素在页面上闪烁，这种动画同样也是使用CSS3的opacity属性实现。例如：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。