Work with it this way DEMO
#box1{
max-height: 17%;
max-width: 17%;
position: absolute;
top: 52%;
left: -50px;
-webkit-animation-name:boxMoving;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
/*-webkit-animation-iteration-count:infinite;*/
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes boxMoving{
0% { margin-left:-20px;}
40% { margin-left:185px;}
50% { margin-left:185px; }
100% { margin-left:365px; }
}
And change the light and cameraflash animation durations and delays this way
.lights{
max-height: 38.3%;
max-width: 30%;
z-index: 100;
position: absolute;
opacity: 0;
animation:lightFading 1s;
-moz-animation:lightFading 1s; /* Firefox */
-webkit-animation: lightFadingIn 1s; /* safari and chrome*/
-o-animation:lightFading 1s; /* Opera */
-webkit-animation-delay: 2.0s;
-webkit-animation-fill-mode: forwards;
}
@keyframes lightFadingIn {
0% {opacity:0;}
80% {opacity:1;}
100% {opacity:0;}
}
#cameraFlash{
top: 32%;
z-index: 100;
left: 21%;
opacity:0;
-webkit-animation-name: cameraFlashDisplay 2s;
/*-webkit-animation: cameraFlash 0.2s;*/
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2.0s;
-webkit-animation-fill-mode: forwards;
}
@keyframe cameraFlashDisplay {
0% {
opacity:0;
}
80% {
opacity:1;
}
100% {
opacity:1;
}
}
Hope it helps