반응 CSS3 체인 애니메이션, 일시 중지 및 다시 시작 문제

Question

css3 애니메이션 만을 사용하여 애니메이션하려고하고 있는데 응답 성이 유지되는 것은 ipad 크기까지입니다. 나는 빛이 켜진 후 상자를 옮길 필요가있는 문제를 보았고 그것을 할 수없는 것처럼 보였다.

My Fiddle

여기에 지금까지 한 일이다 ..

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. 

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%);} 
} 

이 사람이 나를 도울 수 있습니까? 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; 
    } 

} 

그것이