如何在输入控件内设置图像旋转动画？

Question

基于这个答案，我设法将图像作为我的图标出现在其右边缘的输入控件内。如果我使用旋转的 GIF，我就准备好了。我只需要把班级设置在我的控制范围内，它就会“进展”。

input.busy {
  background-image: url(...);
  ...
}

但是...现在，我想控制旋转的速度，所以我需要实际为图像设置动画。我可以按照本博客中所示的方式进行操作，它适用于许多（但不是所有）元素。我的输入是不幸的例外之一。

div::after {
  content: "this shows";
  background-image: url(...);
}

input::after {
  content: "this shows not";
  background-image: url(...);
}

如何旋转（事实上，动画旋转）位于 INPUT 标签最右边缘的图像（比如说 PNG）？

Answer 1

.loading::after{
  content:'';
  display:inline-block;
  width:50px;
  height:50px;
  background-image:url('https://picsum.photos/id/63/50/50');
 }
 .loading.rotate::after{
   animation: rotation 2s infinite linear;
 }
 @keyframes rotation {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
}

并使用，例如

<div (click)="toogle=!toogle" class="loading" [class.rotate]="toogle">
  here
</div>