Responsive CSS3 chain animation,pausing and resuming issue

Question

Am trying to animate using css3 animation only,but also having the responsiveness maintained till ipad size. I came across an issue where i need to move the box after the lights have come ON and i cant seem to do it.

My Fiddle

Here's what i have done so far..

body{
    margin: 0;
    padding: 0;
    border: 0;
    height:100%;
}
#container{
    margin:0 auto;
    float : none;
    height: 100%;
    width:100%;
}

#waveDisplay{
    /*border: 1px solid black;*/
    height: 7%;
    position: absolute;
    top: 16%;
    width: 3%;
    left: 58%;
    overflow: hidden;
}

#waveImage{
    vertical-align: middle;
    height: 76%;
    position: relative;

    -webkit-animation-name:waveMoving;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes waveMoving{
    from{-webkit-transform:translateX(0px);}
    to{-webkit-transform:translateX(-75%);}
}

#innerWrapper{
    border: 2px solid;
    float:none;
    position: relative;
    width:100%;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
}

#background{
    max-width: 100%;
    max-height: 100%;
}

.lights{
    max-height:  38.3%;
    max-width: 30%;
    z-index: 100;
    position: absolute;

    opacity: 0;
    animation:lightFading 0.1s;
    -moz-animation:lightFading 0.1s; /* Firefox */
    -webkit-animation: lightFadingIn 0.1s; /* safari and chrome*/
    -o-animation:lightFading 0.1s; /* Opera */
    -webkit-animation-delay: 5.2s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes lightFadingIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes lightFadingIn { /* Firefox */
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes lightFadingIn { /* Safari and Chrome */
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes lightFadingOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@-moz-keyframes lightFadingOut { /* Firefox */
    0% {opacity:1;}
    100% {opacity:0;}
}

@-webkit-keyframes lightFadingOut { /* Safari and Chrome */
    0% {opacity:1;}
    100% {opacity:0;}
}

#light1{
    top: 31%;
    left: 14.8%;
}

#light2{
    top: 31%;
    left: 20.2%;
}

#cameraFlash{
    top: 32%;
    z-index: 100;
    left: 21%;

    -webkit-animation-name:  cameraFlashDisplay 2s;
    /*-webkit-animation: cameraFlash 0.2s;*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-delay: 5.2s;
    -webkit-animation-fill-mode: forwards;
}

@keyframe cameraFlashDisplay {
    0% {
        transform: scaleY(0);
        -webkit-transform: scaleY(0.0);
        max-height:0;
    }
    100% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
        max-height:100%;
    }
}

#box1{
    max-height: 17%;
    max-width: 17%;
    position: absolute;
    top: 52%;
    left: 5%;

    -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{
    from{-webkit-transform:translateX(0%);}
    to{-webkit-transform:translateX(275%);}
}

 Here's what i need to do in steps after the box has reached the 3lights:
     1. Lights should turn OFF.
     2. Box should keep on moving.

Can anyone help me out with this? Am kinda new to css3 animation.

If the fiddle doesn't work,try clearing the cache and running it again.

Answer 1

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