Question

我有一张这样一步一步的海报的图像，我把它放在另一个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);

Answer 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;
}

在同一元素上使用多重变换：translate（X，Y）

1 个答案: