[分享]css3同时两个动画

CSS3是网页设计中常用的样式语言，它支持多种动画效果，如文本渐隐渐显、旋转动画、平移动画等等。而今天我们来介绍一种同时使用两个动画效果的方法。 .box{ width: 100px; height:...

CSS3是网页设计中常用的样式语言，它支持多种动画效果，如文本渐隐渐显、旋转动画、平移动画等等。而今天我们来介绍一种同时使用两个动画效果的方法。

 .box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: rotate 3s linear infinite, move 2s ease-out infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes move {
    0% {
      top: 0px;
      left: 0px;
    }
    50% {
      top: 100px;
      left: 100px;
    }
    100% {
      top: 0px;
      left: 0px;
    }
  } 

以上是使用CSS3同时两个动画的代码实现。我们首先定义了一个具有红色背景的div，通过设置相对定位，使得该元素能够对动画进行操作。然后，在animation属性中同时设置了两个动画效果，分别是“rotate”和“move”，并同时设置了两个无限循环效果。

“rotate”动画是通过设置关键帧动画实现的，它从0度开始旋转，到360度结束，整个过程持续了3秒钟，采用线性动画进行过渡。而“move”动画则是通过设置3个关键帧动画实现的，从初始位置开始，到中间位置后，再回到初始位置，整个过程持续2秒时间，采用缓出动画进行过渡。

这种同时使用两个动画效果的方法，可以让网页中的元素展现更加丰富的动态效果，增强页面的视觉吸引力和趣味性，同时也提高了用户的体验感受。