我正在尝试制作一个简单的动画，其中包含来自不同方向的多个图像，最后将每个图像彼此对齐。这是仅使用 CSS3，而不使用 javascript。然而，由于我没有用它做过任何动画，所以我很困惑，而且我很确定我做得不对。这是我现在所做的代码的jsfiddle，并且它按预期工作:
尽管如此，我还是很困惑，因为我不理解 @-webkit-keyframes/@keyframes 规则。
在第一个图像(红色)上，它从左侧 0px 精确移动到 300px，而第二个图像(蓝色)应该从左侧移动 400px 到 -100px，所以从技术上讲，它会走到外面并消失，但它会移到 img1 旁边。
最后但并非最不重要的一点是，第三张图片(绿色)应该在蓝色图片旁边，并且会一起在外面，但它就在它后面移动。
这是为什么呢？有人可以简单地解释一下动画是如何工作的吗？有更好的方法吗？
如果链接不起作用，请使用以下代码:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<div id="img1"/>
<div id="img2"/>
<div id="img3"/>
</body>
</html>
CSS
#img1, #img2, #img3 {
width: 100px;
height: 30px;
position: relative;
}
#img1 {
background: red;
-webkit-animation: first 5s infinite; /* Chrome, Safari, Opera */
animation: first 5s infinite;
}
#img2 {
background: blue;
-webkit-animation: second 5s infinite; /* Chrome, Safari, Opera */
animation: second 5s infinite;
}
#img3 {
background: green;
-webkit-animation: third 5s infinite; /* Chrome, Safari, Opera */
animation: third 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes first {
from {left: 0px;}
to {left: 300px;}
}
@keyframes first {
from {left: 0px;}
to {left: 300px;}
}
@-webkit-keyframes second {
from {left: 400px;}
to {left: -100px;}
}
@keyframes second {
from {left: 400px;}
to {left: -100px;}
}
@-webkit-keyframes third {
from {left: 300px;}
to {left: -100px;}
}
@keyframes third {
from {left: 300px;}
to {left: -100px;}
}
预先感谢您的帮助。
最佳答案
这是因为 #img1、#img2、#img3 处于相对位置...您想要相对于浏览器窗口的动画所以你必须使用固定定位。
#img1, #img2, #img3 {
width: 100px;
height: 30px;
position: fixed;
}
工作演示:Fiddler
(有关 CSS Positioning 的更多信息)
关于html - CSS3多重动画: not clear at all，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29558348/