html - 如何在具有过渡的单个元素上应用多个css3旋转

我想实现这样的事情：

img{
    transition: 5s linear;
    transform: scale(2,2) rotate(-20deg) rotate(40deg) rotate(-40deg) rotate(20deg) scale(0.5, 0.5);
}

但只是缩放一点，然后再缩放回原始大小。

最佳答案

您只需创建一个元素并使用关键帧向其中添加动画，如下例所示：

.element {
  animation: rotate 5s infinite;
  width: 50px;
  height: 50px;
  background-color: green;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
     transform: rotate(20deg);
  }
  50% {
     transform: rotate(-20deg);
  }
  75% {
     transform: rotate(20deg);
  }
  100% {
     transform: rotate(-20deg);
  }
}

<div class="element"> </div>

您可以在这里找到有关它的更多信息：https://css-tricks.com/almanac/properties/a/animation/

关于html - 如何在具有过渡的单个元素上应用多个css3旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42434626/