响应CSS3链动画，暂停和恢复问题

Question

我试图使用css3动画仅动画，但也有响应性保持直到ipad大小。我遇到了一个问题，我需要在灯亮后移动盒子，但我似乎做不到。

我的小提琴

这是我到目前为止所做的…

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

并更改灯光和闪光灯动画的持续时间和延迟

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

希望有所帮助