響應式CSS3鏈接動畫，暫停和恢復問題

Question

我試圖使用動畫只有css3動畫，但也有響應保持直到ipad大小。 我遇到了一個問題，我需要在燈亮起後移動框，我似乎無法做到這一點。

My Fiddle

這是我迄今所做..

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. 

誰能幫我這個？ 對於css3動畫有點新鮮。

如果小提琴不起作用，請嘗試清除緩存並再次運行。

Answer 1

工作與它這樣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; } 
} 

而改變光線和cameraflash動畫的持續時間和延遲這樣

.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; 
    } 

} 

希望它可以幫助