1
我有3个对象（div），我希望在页面加载后立即同时转换。为了帮助创建动画，我使用了一点点的JavaScript，它只与一个对象完美协作，但我不确定如何重写JavaScript以激活所有3个对象，从而遵守每个对象的单独样式。使用css3/javascript跨多个对象转换多个对象
我在Mozilla开发人员网络站点（https://developer.mozilla.org/en/CSS/CSS_transitions/）上找到了“使用转换事件来为对象设置动画效果”的示例，但不幸的是他们禁用了他们的论坛，因此找不到解决方案。
这里是基本的HTML：
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
我有2周的div的背景图片，一个代表，而左边的对象的造型，它的右侧位置的造型。
下面是一个对象的CSS：
.cloud1Right {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:2%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
.cloud1Left {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:90%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
这里是调用了这个对象，并激活它对面的屏幕再次移动，然后使用Javascript：
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div.cloud1Left");
if (el) {
el.className = "cloud1Right";
} else {
el = document.querySelector("div.cloud1Right");
el.className = "cloud1Left";
}
return el;
}
现在，我想同时转换的其他2个元素分别命名为.cloud2Left（和.cloud2Right）和.cloud3Left（和.cloud3Right），每个元素都有自己特定的样式（位置，左侧％，转换率等）。
我已经在网上寻找解决方案，并与js搞混了。我查看了这里和周围的网络，发现了有关选择器的信息，以及如何在没有运气的情况下使用多个选择器。
var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");
和
var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");
和同为el.className
如果任何人有任何意见或知道如何改写JavaScript的：我已经使用了多种选择像这样的尝试函数来包含所有3个对象（div），并在页面加载时让它们同时工作，我将非常感激。先谢谢你。