我想知道如何在一个元素上同时发生以下两个动画:
@keyframes BackgroundSnowfall{
from {transform: translate(0px, 0px);}
to {transform: translate(0px, 936px);}
}
@keyframes shuffle{
0% {transform: translate(0px);}
33% {transform: translate(20px);}
66% {transform: translate(-20px)}
100% {transform: translate(0px)}
}
这两个动画都是在持续时间上有很大差异的情况下运行的(大约有55秒的间隔),所以我不想做数学运算,也不想创建一个长的单个动画关键帧来将它们合并在一起。
根据这个答案,您可能能够链接这两个关键帧动画。
编辑
下面的答案显示了如何将图像包装在<div>
中,并将一个变换应用于<div>
包装器,将第二个变换应用到<img>
。
这里有一个例子:
#wrapper {
position: relative;
animation: vertical 10s infinite;
}
img {
animation: horizontal 5s infinite;
}
@keyframes vertical{
from {transform: translate(0px, 0px);}
to {transform: translate(0px, 936px);}
}
@keyframes horizontal{
0% {transform: translate(0px);}
33% {transform: translate(20px);}
66% {transform: translate(-20px)}
100% {transform: translate(0px)}
}
<div id="wrapper"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVHhe7dAxEQAgDAAxhHTEvzM8YKG/5y4Kct5clmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZgaxAViArkBXICmQFsgJZa3M/KCjwdMHWsEkAAAAASUVORK5CYII=" /></div>