[分享]css3怎么开始动画

CSS3是一种前端技术，在网页设计中起到至关重要的作用。可以让网页视觉效果更加丰富和生动。在CSS3中，动画效果非常重要，它可以使你的网页更加生动有趣。下面让我们来了解一下CSS3动画的基本用法。/ ...

CSS3是一种前端技术，在网页设计中起到至关重要的作用。可以让网页视觉效果更加丰富和生动。在CSS3中，动画效果非常重要，它可以使你的网页更加生动有趣。下面让我们来了解一下CSS3动画的基本用法。

/* 基本动画 */
div{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myanimation 2s infinite; 
}

@keyframes myanimation {
  0% { transform: translateX(0px); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0px); }
} 

在上面的代码中，我们首先设置了一个div的样式，它的宽度为100px，高度为100px，背景颜色为红色。接下来，在div的样式中，我们设置了动画效果，其中myanimation是动画的名称，2s表示动画的持续时间为2秒，infinite表示动画无限循环。接着，在@keyframes中，我们定义了动画的关键帧，0%表示动画开始时的状态，50%表示动画中间的状态，100%表示动画结束时的状态。在这里，我们用translateX来控制div元素的水平移动。

/* 多重动画 */
div{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myanimation 2s infinite, myanimation2 2s infinite; 
}

@keyframes myanimation {
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}

@keyframes myanimation2 {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
} 

上述代码中我们定义了两个动画，分别为myanimation和myanimation2，结合使用多重动画时，我们可以通过逗号分隔符来为一个元素同时设置多个动画。在这里，我们使用opacity来控制div元素的透明度，使用scale来控制元素的大小。

以上是CSS3动画的基本用法，它是网页设计中不可或缺的技术之一，我们可以通过学习它，来提升网页的用户体验，为用户带来更加舒适的使用感受。