元素从最左侧顺序移入

最近在做的有好多动画特效，现在在说的是三个元素都从最左边移入，我的方法可能是很笨的方法，还没有找到最好的办法，我先记录一下我的方法

<div class="yuan dong1">
				<img src="/Images/index/product.png" />
			</div>
			<div class="yuan dong2">
				<img src="/Images/index/game.png" />
			</div>
			<div class="yuan dong3">
				<img src="/Images/index/zqdl.png" />
			</div>

 div.yuan { width: 220px; padding: 70px 0; }
        .dong1{animation: floatOut1 .1s .1s linear forwards;}
		.dong2{animation: floatOut2 .5s .1s linear forwards;}
		.dong3{ animation: floatOut3 1.5s .1s linear forwards;}
        
        @@keyframes floatOut1 {
            0% {
                opacity: 0;
                transform: translate3d(-50px,0,0);
                -webkit-transform: translate3d(-50px,0,0);
                -moz-transform: translate3d(-50px,0,0);
                -ms-transform: translate3d(-50px,0,0);
                -o-transform: translate3d(-50px,0,0);
            }

            100% {
                opacity: 1;
                transform: translate3d(0,0,0);
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -ms-transform: translate3d(0,0,0);
                -o-transform: translate3d(0,0,0);
            }
        }

        @@keyframes floatOut2 {
            0% {
                opacity: 0;
                transform: translate3d(-500px,0,0);
                -webkit-transform: translate3d(-500px,0,0);
                -moz-transform: translate3d(-500px,0,0);
                -ms-transform: translate3d(-500px,0,0);
                -o-transform: translate3d(-500px,0,0);
            }

            100% {
                opacity: 1;
                transform: translate3d(10px,0,0);
                -webkit-transform: translate3d(10px,0,0);
                -moz-transform: translate3d(10px,0,0);
                -ms-transform: translate3d(10px,0,0);
                -o-transform: translate3d(10px,0,0);
            }
        }

        @@keyframes floatOut3 {
            0% {
                opacity: 0;
                transform: translate3d(-1000px,0,0);
                -webkit-transform: translate3d(-1000px,0,0);
                -moz-transform: translate3d(-1000px,0,0);
                -ms-transform: translate3d(-1000px,0,0);
                -o-transform: translate3d(-1000px,0,0);
            }

            50% {
                opacity: 0;
                transform: translate3d(-1000px,0,0);
                -webkit-transform: translate3d(-1000px,0,0);
                -moz-transform: translate3d(-1000px,0,0);
                -ms-transform: translate3d(-1000px,0,0);
                -o-transform: translate3d(-1000px,0,0);
            }

            100% {
                opacity: 1;
                transform: translate3d(60px,0,0);
                -webkit-transform: translate3d(60px,0,0);
                -moz-transform: translate3d(60px,0,0);
                -ms-transform: translate3d(60px,0,0);
                -o-transform: translate3d(60px,0,0);
            }
        }

　　这就是我的笨办法，要是有简单的方法，还希望多交流