使用多重变换： translate(X, Y) 在同一个元素上答案

【问题标题】：use multiple transform: translate(X, Y) on same element使用多重变换： translate(X, Y) 在同一个元素上
【发布时间】：2017-11-04 12:52:08
【问题描述】：

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

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);

【问题讨论】：

你有更多的例子来说明你正在尝试做什么吗？这是其中之一，您可以在其中单击前进或后退按钮，它会朝那个方向“滚动”图像，然后您会看到新图像？
不，但这是个好主意。我拿了一个如何搭建帐篷的图像，顶部中心的帐篷倒塌了，然后以时钟运动的方式进行两步将其放置起来，然后底部中心将其抬起并继续将其放下，直到它回到顶端。而不是 gif，这是不可用的，我将使用转换。我制作了一个 div 来保存图像，并使图像比 div 大三倍（中间、左侧和右侧各一个）并隐藏溢出。然后我只是从一个步骤过渡到下一个步骤，但是如果您只列出过渡，它就不起作用

标签： jquery css css-animations css-transforms

【解决方案1】：

我不熟悉 css 动画，但它仍然很容易。使用@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;
}

【讨论】：