css3添加2个animation

CSS3是一个非常强大的前端技术，可以通过使用它的动画特效来为网站增添更多的美感和互动性。其中，可以使用animation属性来添加动画效果。下面，我们将介绍如何使用CSS3添加2个animation。

/*首先，我们需要为动画创建一个被命名的关键帧规则，规定了动画将如何运动和如何变化*/ 

@keyframes example {
  0%   {background-color: red; left:0px; top:0px;}
  50%  {background-color: yellow; left:200px; top:0px;}
  100% {background-color: red; left:0px; top:0px;}
}

/*接着，我们需要定义元素的样式，包括它的宽度、高度、位置等*/

div {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: example; /*将该元素的动画效果命名为example*/
  animation-duration: 4s; /*规定了animation执行一次的时长*/
}

/*当我们想要添加第二个动画效果，需要为它添加animation-delay或animation-offset属性*/

div:nth-of-type(2) { /*选择第二个div*/
  width: 100px;
  height: 100px;
  position: relative;
  top:200px;
  left:0px;
  animation-name: example; /*将该元素的动画效果命名为example*/
  animation-duration: 4s; /*规定了animation执行一次的时长*/
  animation-delay: 2s; /*规定了animation执行的延迟时间为2s*/
}

这样两个动画就完成了，它们都是通过example关键帧来设置其动画效果，只需要分别添加到两个不同的div上，并为第二个div添加animation-delay或animation-offset属性，就可以实现更加复杂的动画效果了。