响应式 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; }
}

并以这种方式更改灯光和相机闪光灯动画的持续时间和延迟

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

}

希望对你有帮助