这是我第一次自己编写 CSS3 动画，我刚打开页面，它没有运行。
唯一的效果是动画fallB应用到的东西消失了，但在同一个位置。
应用动画的其他元素没有任何反应。
我究竟做错了什么？
这是我的代码：
.animated{
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
-moz-transform3d: translate(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.animated.fallA{
-moz-animation: fallA 1s forwards ease-in-out;
-webkit-animation: fallA 1s forwards ease-in-out;
animation: fallA 1s forwards ease-in-out;
}
.animated.fallB{
-moz-animation: fallB 1s forwards ease-in-out;
-webkit-animation: fallB 1s forwards ease-in-out;
animation: fallB 1s forwards ease-in-out;
}
.animated.fallC{
-moz-animation: fallC 1s forwards ease-in-out;
-webkit-animation: fallC 1s forwards ease-in-out;
animation: fallC 1s fowards ease-in-out;
}
.animated.fallD{
-moz-animation: fallD 1s forwards ease-in-out;
-webkit-animation: fallD 1s forwards ease-in-out;
animation: fallD 1s forwards ease-in-out;
}
.animated.fallE{
-moz-animation: fallE 1s forwards ease-in-out;
-webkit-animation: fallE 1s forwards ease-in-out;
animation: fallE 1s forwards ease-in-out;
}
@-moz-keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-300px;
left:-400px;
}
100%{
opacity:1.0;
top:0;
left:0;
}
}
@-webkit-keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-300px;
left:-400px;
}
100%{
opacity:1.0;
top:-300px;
left:-400px;
}
}
@keyframes fallA{
0%{
position:relative;
opacity:0.0;
top:-300px;
left:-400px;
}
100%{
opacity:1.0;
top:-300px;
left:-400px;
}
}
@-moz-keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-200px;
left:-200px;
}
100%{
opacity:1.0;
top:0;
left:0;
}
}
@-webkit-keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-200px;
left:-200px;
}
100%{
opacity:0.0;
top:0;
left:0;
}
}
@keyframes fallB{
0%{
position:relative;
opacity:0.0;
top:-200px;
left:-200px;
}
100%{
opacity:1.0;
top:0;
left:0;
}
}
@-moz-keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
100%{
opacity:1.0;
top:0;
}
}
@-webkit-keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
100%{
opacity:1.0;
top:0;
}
}
@keyframes fallC{
0%{
position:relative;
opacity:0.0;
top:-100px;
}
100%{
opacity:1.0;
top:0;
}
}
@-moz-keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-200px;
right:-200px;
}
100%{
opacity:1.0;
top:-200px;
right:-200px;
}
}
@-webkit-keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-200px;
right:-200px;
}
100%{
opacity:1.0;
top:-200px;
right:-200px;
}
}
@keyframes fallD{
0%{
position:relative;
opacity:0.0;
top:-200px;
right:-200px;
}
100%{
opacity:1.0;
top:0;
right:0;
}
}
@-moz-keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-300px;
right:-400px;
}
100%{
opacity:1.0;
top:0;
right:0;
}
}
@-webkit-keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-300px;
right:-400px;
}
100%{
opacity:1.0;
top:0;
right:0;
}
}
@keyframes fallE{
0%{
position:relative;
opacity:0.0;
top:-300px;
right:-400px;
}
100%{
opacity:1.0;
top:0;
right:0;
}
}