Javascript 像溜溜球一样左右设置元素动画

我有一个红色的盒子作为动画元素

下面是我想要如何设置红色框动画的简单表示

这是一个尝试，但正如您所看到的，运动的锚点位于方框的左侧，而不是我希望的中心：

.yo-yo{
显示：块；
位置：绝对位置；
高度：50px；
宽度：200px；
背景：红色；
变换原点：50%50%；
动画：悠悠0.5s无限交替；/*动画速度和类型*/
}
/*动画的开始和结束*/
@关键帧溜溜球{
从{左：0}
到{左：20px}
}

您需要使用，而不是在关键帧规则中简单地声明

from

和

to

这样就足够了。如果你想要一个重复的动画，那么只需在线性之前添加一个

infinite

html，
身体{
填充：0；
保证金：0；
大纲：无；
边界：0；
}
悠悠{
显示：块；
位置：绝对位置；
高度：50px；
宽度：200px；
背景：红色；
变换原点：50%50%；
动画：YOYO2S线性；
/*动画速度和类型*/
动画计时功能：轻松进出；
}
/*动画的开始和结束*/
@关键帧溜溜球{
0% {
左：0px；
}
25% {
左：-100px；
}
50% {
左：0px；
}
75% {
左：100px；
}
100% {
左：0px；
}
}

您需要使用，而不是在关键帧规则中简单地声明

from

和

to

这样就足够了。如果你想要一个重复的动画，那么只需在线性之前添加一个

infinite

html，
身体{
填充：0；
保证金：0；
大纲：无；
边界：0；
}
悠悠{
显示：块；
位置：绝对位置；
高度：50px；
宽度：200px；
背景：红色；
变换原点：50%50%；
动画：YOYO2S线性；
/*动画速度和类型*/
动画计时功能：轻松进出；
}
/*动画的开始和结束*/
@关键帧溜溜球{
0% {
左：0px；
}
25% {
左：-100px；
}
50% {
左：0px；
}
75% {
左：100px；
}
100% {
左：0px；
}
}

---

你把它弄得太复杂了。只需使用

@关键帧中的百分比

，然后像这样使用

transform:translateX（number）

：

@keyframes yo-yo {
  0% {transform: translateX(0); }
  25% { transform: translateX(-20px); }
  75% { transform: translateX(20px);  }
  100% { transform: translateX(0px);  }
}

---

你应该尝试使用

transform

，而不是给出位置。为了更好地理解，请查看此链接。

您的操作太复杂了。只需使用

@关键帧中的百分比

，然后像这样使用

transform:translateX（number）

：

@keyframes yo-yo {
  0% {transform: translateX(0); }
  25% { transform: translateX(-20px); }
  75% { transform: translateX(20px);  }
  100% { transform: translateX(0px);  }
}

---

你应该尝试使用

transform

，而不是给出位置。为了更好地理解，请查看此链接。

您可以将动画与

无限法向线性

一起使用。如果从动画中删除

infinite

，则它将在一次迭代后停止。动画分为5个部分<代码>0，一直向右，0，一直向左，0。因此，开始从

0%、25%、50%、75%和100%更改左侧位置。

.yoyo容器{
背景色：#DEEBF7；
填充：12px；
位置：相对位置；
宽度：200px；
高度：16px；
保证金：0自动；
}
悠悠{
显示：块；
位置：绝对位置；
高度：16px；
宽度：200px；
背景：红色；
变换原点：50%50%；
动画：yo yo 2s无限法线线性；/*动画速度和类型*/
}
/*动画的开始和结束*/
@关键帧溜溜球{
0%{transform:translateX（0）；}
25%{转换：translateX（50%）；}
50%{transform:translateX（0）；}
75%{transform:translateX（-50%）；}
100%{transform:translateX（0）；}
}

---

您可以将动画与

无限法向线性

一起使用。如果从动画中删除

infinite

，则它将在一次迭代后停止。动画分为5个部分<代码>0，一直向右，0，一直向左，0。因此，开始从

0%、25%、50%、75%和100%更改左侧位置。

.yoyo容器{
背景色：#DEEBF7；
填充：12px；
位置：相对位置；
宽度：200px；
高度：16px；
保证金：0自动；
}
悠悠{
显示：块；
位置：绝对位置；
高度：16px；
宽度：200px；
背景：红色；
变换原点：50%50%；
动画：yo yo 2s无限法线线性；/*动画速度和类型*/
}
/*动画的开始和结束*/
@关键帧溜溜球{
0%{transform:translateX（0）；}
25%{转换：translateX（50%）；}
50%{transform:translateX（0）；}
75%{transform:translateX（-50%）；}
100%{transform:translateX（0）；}
}

可以，但代码中存在问题。重复动画时会出现抖动…尝试使用2%而不是0%，使用98%而不是100%。还是这样吗？@SaraReeok，但你的代码有问题。重复动画时会出现抖动…尝试使用2%而不是0%，使用98%而不是100%。它还会发生吗@SaraRee@Sara在重复动画之前，你可以尝试增加一点延迟。放松没有解决办法吗？@SaraRee我不相信放松能解决问题jank@SaraRee解决了它，jank是由于文档的默认填充和边距，试着跑步again@SaraRee额外宽松too@Sara在重复动画之前，你可以尝试增加一点延迟。放松没有解决办法吗？@SaraRee我不相信放松能解决问题jank@SaraRee解决了它，jank是由于文档的默认填充和边距，试着跑步again@SaraRee我们不能使用放松吗？

线性

是

动画计时功能

。您可以尝试使用

ease

、

ease-in

、

ease-in-out

等。。但是

linear

符合你的要求当你说放松时，你是说tweenmax放松？请看一看