Question

我有一个图像，想要使用CSS将其向右移动，然后向左移动。但是，我想将驱动器与transform：scaleX（-1）组合在一起。如下：

---- ---图像GT＆;向右移动

使用transform：scaleX（-1）
向左移动＆LT; ------ ----图像

我有代码：

<input type="submit" name="submit" value="Send" />

Answer 1

使用交替动画无法获得此效果，因为后退移动与前进移动不同。

首先，我们需要为两个方向设置单个动画;然后，您可以添加关键帧来控制反转

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: custom 4s infinite;
}

@keyframes custom {    
   0% {
       margin-left:  -200px;
       transform: scaleX(1);
   }
   49% {
       margin-left: 200px;       
       transform: scaleX(1);
   }
   50% {
       margin-left: 200px;       
       transform: scaleX(-1);
   }
   100% {
       margin-left: -200px;       
       transform: scaleX(-1);
   }
}

<div>TEST</div>

如何使用变换CSS动画

1 个答案: