[分享]css中怎么做出动画效果

CSS中有很多种方法可以实现动画效果，下面我们一起来看看吧。

1. 使用transition

img {
  transition: transform .5s ease-in-out;
}

img:hover {
  transform: scale(1.2);
} 

通过使用transition属性，我们可以控制元素的属性变化时间和动画效果。以上代码就是让图片在鼠标滑过时放大1.2倍，变换时间为0.5秒，并且有缓动效果。

2. 使用animation

.loading {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

animation属性可以用来创建复杂的动画效果。在上面的代码中，我们定义了一个名为rotate的关键帧动画，然后将其应用于.loading类。这样就会使得.loading元素在2秒内以线性方式无限旋转360度。

3. 使用transform

.btn {
  transform: translateX(-50%);
}

.btn:hover {
  transform: translateX(-50%) scale(1.2);
} 

transform属性不仅可以实现简单的变换，还能够结合其他属性一起使用，创造丰富的动画效果。在上面的代码中，我们将.btn元素向左平移50%，并且在鼠标滑过时放大1.2倍。

总结来说，CSS提供了很多种方法可以实现动画效果，通过灵活的运用这些方法，可以让网页更加生动有趣。