[分享]css中怎么给动画设置时间

CSS中实现动画效果可以通过关键帧动画（keyframes）或过渡（transition）来实现，不同的实现方式有不同的设置时间的方法。关键帧动画的时间设置关键帧动画通过设置动画的关键帧，来控制动画的...

CSS中实现动画效果可以通过关键帧动画（@keyframes）或过渡（transition）来实现，不同的实现方式有不同的设置时间的方法。

关键帧动画的时间设置

关键帧动画通过设置动画的关键帧，来控制动画的执行过程。在具体设置中，可以通过设置animation-duration来控制动画的执行时间。

div {
  animation-duration: 2s;
  animation-name: example;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
} 

过渡的时间设置

过渡通过改变元素属性的值来实现动画效果，其本质就是从一个状态过渡到另一个状态。其中可以通过设置transition-duration来控制执行时间。

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 200px;
} 

其中，transition可设置多个属性值进行过渡，还可设置过渡的速率变化（transition-timing-function）、过渡延时（transition-delay）等。可以通过以下代码实现多个属性值的过渡设置。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: yellow;
} 

以上为CSS中动画时间设置的两种方法，我们可以根据实际需求进行选择和设置，从而完成我们想要的动画效果。