css实现先旋转后放大动画

CSS是网页设计中不可或缺的一部分，它可以实现各种各样的动画效果。本文将介绍如何使用CSS实现一个先旋转再放大的动画效果。

.rotate {
  animation: rotateAndScale 2s ease-in-out forwards;
  transform-origin: center center;
}

@keyframes rotateAndScale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(180deg) scale(3);
  }
}

首先，我们需要定义一个class名为”rotate”的元素，这个元素将拥有这个动画效果。我们在这个class中定义动画属性animation和变换属性transform-origin。animation属性指定动画的名称、时间、时间函数和结束后的状态。我们在这里使用了一个名为rotateAndScale的动画。这条动画会在2s内以ease-in-out的方式运行，运行结束后会保留最后一帧的状态，也就是动画结束时的状态。我们还定义了transform-origin属性，指定动画的变换中心为元素的中心点。

接下来，我们定义动画rotateAndScale。这个动画由三个关键帧组成，分别对应动画的三个阶段。0%这个关键帧定义了动画的起始状态，也就是旋转角度为0°，缩放比例为1。50%这个关键帧定义了动画的中间状态，也就是旋转角度为180°，缩放比例为1。最后的100%这个关键帧定义了动画的结束状态，也就是旋转角度不再变化，缩放比例变为3。

有了这个CSS代码，我们就可以给需要使用这个动画效果的元素添加class名为”rotate”，从而实现先旋转再放大的动画效果。尝试使用这个代码，添加自己的CSS样式，让动画更加生动多彩吧！