旋转、缩放、移动：掌握CSS Transform动画的终极指南！




/* 定义动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.element {
  animation: rotate 2s infinite linear,
              scale 2s infinite linear,
              move 2s infinite linear;
}

这段代码定义了三个关键帧动画，分别用于旋转、缩放和移动，并将它们应用于.element类。每个动画都在无限循环中以线性的速度执行，每个动画的持续时间是2秒。这样的组合可以创建一个连续的动画效果，展示了CSS变换的强大功能。

旋转、缩放、移动：掌握CSS Transform动画的终极指南！

评论已关闭

推荐阅读