jquery - 在同一元素上使用多重变换 : translate(X, Y)

Question

我有一张逐步海报的图片，我将它放在另一个 div 中以隐藏海报图片上的所有多余部分并 overflow hidden 部分，因此它一次只显示一个步骤。

transform: translate(-23px, -40px);
transform: translate(25px, -165px);
transform: translate(5px, -325px);
transform: translate(-230px, -420px);
transform: translate(-442px, -325px);
transform: translate(-485px, -175px);
transform: translate(-440px, -40px);
transform: translate(-220px, -10px);

Answer 1

我不熟悉 css animate，但它仍然很容易。使用 @keyframes 并命名您的函数，然后输入它运行转换的百分比。最后只需调用您想要的函数并添加具有函数名称、循环时间和循环次数属性的动画。

@keyframes MARY-GO-ROUND{
   0%, 100% {transform: translate(-23px, -40px);}
   12% {transform: translate(25px, -165px);}
   24% {transform: translate(5px, -325px);}
   36% {transform: translate(-230px, -420px);}
   48% {transform: translate(-442px, -325px);}
   60% {transform: translate(-485px, -175px);}
   72% {transform: translate(-440px, -40px);}
   84% {transform: translate(-220px, -10px);}
}
img#image_go_round{
   animation: MARY-GO-ROUND 20s infinite;
}