Question

css3 动画执行冲突

下面贴代码
.awl{position:absolute; left:0; top:50%; width:7.8125%;animation: 1.5s ease 0s normal both infinite toLeft;-webkit-animation: 1.5s ease 0s normal both infinite toLeft;}
.awr{position:absolute; right:0; top:50%; width:7.8125%;animation: 1.5s ease 0s normal both infinite moveToRight;-webkit-animation: 1.5s ease 0s normal both infinite moveToRight;}
@-webkit-keyframes toLeft {
0% {
transform:translateX(0);
}
100% {
transform:translateX(-100%);
}
}

@keyframes toLeft{
0% {
transform:translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToRight {
0% {
transform:translateX(0);
}
100% {
transform: translateX(100%);
}
}

@keyframes moveToRight {
0% {
transform:translateX(0);
}
100% {
transform: translateX(100%);
}
}
不知道问题出在哪里，moveToRight会反复执行

Answer 1

animation:moveToRight 1.5s ease 0s 1 both infinite 试试