使用多重转换：在同一元素上翻译（X，Y）

我有这些逐步海报中的一个的图像，我将它放在另一个div中以隐藏海报图像上的所有多余部分并隐藏溢出，因此它只会一次显示一步。使用多重转换：在同一元素上翻译（X，Y）

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

来源

2017-06-03 Tech Tron

您是否有更多关于您想要做什么的示例？这是其中的一种，你可以点击向前或向后的按钮，它会在该方向“滚动”图像，然后你看到一个新的图像？ – Kurt

不，但这是一个好主意。我采取了如何搭建一个帐篷图像，顶部中心的一个帐篷倒塌，然后在两个步骤的时钟运动，把它放起来，然后底部中心有了它，继续步骤放下它，直到它回到了顶端。而不是一个gif，这是不可用的，我将使用转换。我做了一个div来保存图像，并使图像比div（中间，左侧和右侧的一个）大三倍并隐藏了溢出。那么我只是从一个步骤转换到下一个步骤，但如果您只列出转换，则不起作用 –

我不熟悉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; 
}

来源

2017-06-03 23:11:37

使用多重转换：在同一元素上翻译（X，Y）

回答

相关问题