-1 
<style>
.abc .abc-animation {
position: relative;
margin: 0 auto;
width: 632px;
height: 460px;
overflow: hidden;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
background-image: url("http://zacharybrown.files.wordpress.com/2008/05/7-indians-chief.jpg");
}

.abc .ready .mouse {
-webkit-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-moz-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-ms-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-o-animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
animation: mouseani 8s 0s 1 normal forwards, mousegone .1s 8s 1 normal forwards;
-webkit-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-moz-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-o-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
-ms-animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
animation-timing-function: cubic-bezier(0.5, 0.05, 0 0.6, 1);
}

.abc .mouse {
position: absolute;
left: -9px;
top: -9px;
z-index: 10;
display: inline-block;
opacity: 0;
width: 16px;
height: 16px;
background-color: #808080;
border-radius: 18px;
border: 2px solid #fff;
-webkit-transform: translate(150px, 105px);
-moz-transform: translate(150px, 105px);
-o-transform: translate(150px, 105px);
-ms-transform: translate(150px, 105px);
transform: translate(150px, 105px);
}

.abc .ready .mouse .click {
-webkit-animation: mouseclick 8s 0s 1 normal forwards;
-moz-animation: mouseclick 8s 0s 1 normal forwards;
-o-animation: mouseclick 8s 0s 1 normal forwards;
-ms-animation: mouseclick 8s 0s 1 normal forwards;
animation: mouseclick 8s 0s 1 normal forwards;
}

.abc .mouse .click {
display: inline-block;
opacity: 0;
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 5px;
top: 5px;
}

.abc .ready .screen {
opacity: 0;
}

.abc .screen.one {
z-index: 5;
background-image: url("http://3.bp.blogspot.com/-2kEUWmGpQlw/T4m3TJnnxdI/AAAAAAAABWs/LrY8LwQwWMg/s1600/DA0087.jpg");
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}

.abc .screen {
width: 632px;
height: 460px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
opacity: 1;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

.abc .screen.two {
z-index: 4;
background-image: url("http://cloud3.faout.com/uploads/201208/heditor/201208171536178403.jpg");
-webkit-transition-delay: 5s;
-moz-transition-delay: 5s;
-o-transition-delay: 5s;
-ms-transition-delay: 5s;
transition-delay: 5s;
}

.abc .screen.three {
z-index: 3;
background-image: url("http://blog.seattletimes.nwsource.com/seattlesketcher/linesmith-m.jpg");
-webkit-transition-delay: 8s;
-moz-transition-delay: 8s;
-o-transition-delay: 8s;
-ms-transition-delay: 8s;
transition-delay: 8s;
}
</style>

<article class="abc">
      <div class="container clear">
        <div class="abc-block browser">
          <div class="browser-bar">
            <div class="browser-button"></div>
            <div class="browser-button"></div>
            <div class="browser-button"></div>
          </div>
          <div class="browser-content">
            <div class="abc-animation ready">
              <div class="mouse"><span class="click"></span></div>
              <div class="screen one"></div>
              <div class="screen two"></div>
              <div class="screen three"></div>
              <div class="screen four"></div>
            </div>
          </div>
        </div>        
      </div>
</article>

上記のコードでは、3 つの異なる場所で移動する 1 つの円のドットをアニメーション化したいと考えていますが、機能していません。上記のコードで何が問題になっていますか？私はそのような大きなコードを知っていますが、良い反応が得られ、私の問題を解決できることを願っています.

4

1 に答える 1

1

キーフレームがありません。これは、アニメーション フレームがどうなるかを定義する @ 規則です。

@keyframes mouseani {
  0% { /* initial state */ }
  /*
   * intermediate states
   */
  100% { /* final state */ }
}
于 2013-04-09T07:55:56.243 に答える