CSS 动画在 Chrome 中的工作方式不同

【问题标题】：CSS animation working differently in ChromeCSS 动画在 Chrome 中的工作方式不同
【发布时间】：2016-01-28 23:53:51
【问题描述】：

我正在使用 CSS 动画。 IE 和 Firefox 浏览器运行良好，但在 Chrome 中，即使汽车熄火，车轮也会继续转动。

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0px;

}

#headline1, #headline2{
  background-image: url(http://i.share.pho.to/6846bb0a_o.png); 
  background-repeat: no-repeat;
  width: 261px; 
  height: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
}

#headline1{
  -webkit-animation: fade-in .1s ease 6s 1 reverse forwards;
  -moz-animation: fade-in .1s ease 6s 1 reverse forwards;
  -o-animation: fade-in .1s ease 6s 1 reverse forwards;
  animation: fade-in .1s ease 6s 1 reverse forwards;
}

#headline2 {
  background-position: 0px -25px;
  top: 40px;
  -webkit-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  -moz-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  -o-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
}

button {
  background: #FFCB05;
  height: 34px;
  width: 130px;
  border: none;
  z-index: 999;
  border-radius: 17px;
  color: #000;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;

  -webkit-animation: fade-in 1s ease 7s 1 both;
  -moz-animation: fade-in 1s ease 7s 1 both;
  -o-animation: fade-in 1s ease 7s 1 both;
  animation: fade-in 1s ease 7s 1 both;

}
button:hover,
button:active {
  background-color: #FFD716;
}

.sub-copy {
  color: #FFF;
  position: absolute;
  margin-left: 25px;
  top: 40px;



  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}


#dis {
  background-image: url(http://i.share.pho.to/4516683d_o.jpeg);
  background-repeat: no-repeat;
  width: 138px;
  height: 19px;
  position: absolute;
  margin-left: 22px;
  top: 206px;
  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}


#logo {
  background-image: url(http://i.share.pho.to/306d2b9c_o.png); 
  background-repeat: no-repeat;
  width: 103px; 
  height: 26px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

#tag-line {
  background-image: url(http://i.share.pho.to/e62322ba_o.jpeg);
  background-repeat: no-repeat;
  width: 207px;
  height: 40px;
  position: absolute;
  bottom: 153px;
  left: 14px;
  -webkit-animation: fade-in 1s ease 10.5s 1 both;
  -moz-animation: fade-in 1s ease 10.5s 1 both;
  -o-animation: fade-in 1s ease 10.5s 1 both;
  animation: fade-in 1s ease 10.5s 1 both;
}


#girl-arm {
  position: absolute;
  top: 141px;
  left: 133px;
  width: 9px;
  height: 5px;
  z-index: 7;
  opacity: 0;
  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
  background-repeat: no-repeat;
  background-position: -37px -34px;
  -webkit-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  -moz-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  -o-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
}

#girl-1  {
  position: absolute;
  top: 107px;
  left: 96px;
  width: 84px;
  height: 85px;
  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}




#clock-lamp {
  position: absolute;
  top: 104px;
  left: 184px;
  width: 24px;
  height: 88px;
  background-image: url(http://i.share.pho.to/d264b4e6_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}


#clock2 {
  position: absolute;
  top: 74px;
  left: 181px;
  width: 29px;
  height: 117px;
  background-image: url(http://i.share.pho.to/24b90b3c_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -o-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -ms-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
}


#desk-car {
  position: absolute;
  top: 102px;
  left: 33px;
  width: 204px;
  height: 90px;
  z-index: 5;
  background-image: url(http://i.share.pho.to/0c2e3ceb_o.png);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease 3s 1 both,  fade-in .5s ease 6s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
  -o-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
  animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
}



#window-l, #window-r{
  position: absolute;
  top: 79px;
  width: 59px;
  height: 69px;
  background-image: url(http://i.share.pho.to/4bf00ac7_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}

#window-l{
  left: 18px;
}

#window-r{
  left: 218px;
}

#wheel-l, #wheel-r{
  position: absolute;
  top: 157px;
  width: 32px;
  height: 33px;
  opacity: 0;
  z-index: 9;
  background-image: url(http://i.share.pho.to/08185b2c_o.png);
  background-repeat: no-repeat;
  -webkit-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
  -moz-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
  -o-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
  animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
}

#wheel-l{
  left: 57px;
}

#wheel-r{
  left: 184px;
}



#ad {
  display: block;
  border: rgb(145, 153, 153) 1px solid;
  overflow: hidden;
  cursor: pointer;

  width: 298px;
  height: 248px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#banner {
  position: absolute;
  display: block;
  width: 300px;
  height: 250px;
  background-color: #000;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.buttons {
  position: absolute;
  z-index: 20;
  top: 110px;
  left: 20px;
}

/* ANIMATIONS */

/* WEBKIT */

@-webkit-keyframes frame-animation {
  0% {background-position: 0 0; } 
  100% {background-position: 0 -4920px; }
}

@-webkit-keyframes frame-girl-1 {
  0% {background-position: 0 0; } 
  100% {background-position: -364px 0; }
}

@-webkit-keyframes frame-girl-2 {
  0% {background-position: 0 0; opacity: 1; }
  100% {background-position: -364px 0; opacity: 1; }
}

@-webkit-keyframes frame-clock-lamp {
  0% {background-position: 0 0;}
  100% {background-position: -660px 0;}
}

@-webkit-keyframes move-left {
  from {-webkit-transform: translateX(0);}
  to {-webkit-transform: translateX(-250px);}
}

@-webkit-keyframes frame-desk-car {
  0% {background-position: 0 0;}
  100% {background-position: 0 -2418px;}
}

@-webkit-keyframes frame-window {
  0% {background-position: 0 0;}
  100% {background-position: -354px 0;}
}

@-webkit-keyframes roll-wheel {
  0%{-webkit-transform: rotate(0deg); opacity: 1;}		
  100% {-webkit-transform: rotate(360deg); opacity: 1;}		
}

@-webkit-keyframes fade-in {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}

@-webkit-keyframes mask-in {
  0% {background-position: 0 -50px; opacity: 0;} 
  100% {background-position: 0 -25px; opacity: 1;}
}

@-webkit-keyframes rotate-arm {
  0%{-webkit-transform: rotate(0deg); -webkit-transform-origin: 0% 0%; opacity: 1;}		
  100% {-webkit-transform: rotate(-10deg); -webkit-transform-origin: 0% 0%; opacity: 1;}		
}


/* MOZ */

@-moz-keyframes frame-animation {
  0% {background-position: 0 0; } 
  100% {background-position: 0 -4920px; }
}

@-moz-keyframes frame-girl-1 {
  0% {background-position: 0 0; } 
  100% {background-position: -364px 0; }
}

@-moz-keyframes frame-girl-2 {
  0% {background-position: 0 0; opacity: 1; }
  100% {background-position: -364px 0; opacity: 1; }
}

@-moz-keyframes frame-clock-lamp {
  0% {background-position: 0 0;}
  100% {background-position: -660px 0;}
}

@-moz-keyframes move-left {
  from {-moz-transform: translateX(0);}
  to {-moz-transform: translateX(-250px);}
}

@-moz-keyframes frame-desk-car {
  0% {background-position: 0 0;}
  100% {background-position: 0 -2418px;}
}

@-moz-keyframes frame-window {
  0% {background-position: 0 0;}
  100% {background-position: -354px 0;}
}

@-moz-keyframes roll-wheel {
  0%{-moz-transform: rotate(0deg); opacity: 1;}		
  100% {-moz-transform: rotate(360deg); opacity: 1;}		
}

@-moz-keyframes fade-in {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}

@-moz-keyframes mask-in {
  0% {background-position: 0 -50px; opacity: 0;} 
  100% {background-position: 0 -25px; opacity: 1;}
}

@-moz-keyframes rotate-arm {
  0%{-moz-transform: rotate(0deg); -moz-transform-origin: 0% 0%; opacity: 1;}		
  100% {-moz-transform: rotate(-10deg); -moz-transform-origin: 0% 0%; opacity: 1;}		
}

/* ms */

@-ms-keyframes frame-animation {
  0% {background-position: 0 0; } 
  100% {background-position: 0 -4920px; }
}

@-ms-keyframes frame-girl-1 {
  0% {background-position: 0 0; } 
  100% {background-position: -364px 0; }
}

@-ms-keyframes frame-girl-2 {
  0% {background-position: 0 0; opacity: 1; }
  100% {background-position: -364px 0; opacity: 1; }
}

@-ms-keyframes frame-clock-lamp {
  0% {background-position: 0 0;}
  100% {background-position: -660px 0;}
}

@-ms-keyframes move-left {
  from {-ms-transform: translateX(0);}
  to {-ms-transform: translateX(-250px);}
}

@-ms-keyframes frame-desk-car {
  0% {background-position: 0 0;}
  100% {background-position: 0 -2418px;}
}

@-ms-keyframes frame-window {
  0% {background-position: 0 0;}
  100% {background-position: -354px 0;}
}

@-ms-keyframes roll-wheel {
  0%{-ms-transform: rotate(0deg); opacity: 1;}		
  100% {-ms-transform: rotate(360deg); opacity: 1;}		
}

@-ms-keyframes fade-in {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}

@-ms-keyframes mask-in {
  0% {background-position: 0 -50px; opacity: 0;} 
  100% {background-position: 0 -25px; opacity: 1;}
}

@-ms-keyframes rotate-arm {
  0%{-ms-transform: rotate(0deg); -ms-transform-origin: 0% 0%; opacity: 1;}		
  100% {-ms-transform: rotate(-10deg); -ms-transform-origin: 0% 0%; opacity: 1;}		
}




/* O */

@-o-keyframes frame-animation {
  0% {background-position: 0 0; } 
  100% {background-position: 0 -4920px; }
}

@-o-keyframes frame-girl-1 {
  0% {background-position: 0 0; } 
  100% {background-position: -364px 0; }
}

@-o-keyframes frame-girl-2 {
  0% {background-position: 0 0; opacity: 1; }
  100% {background-position: -364px 0; opacity: 1; }
}

@-o-keyframes frame-clock-lamp {
  0% {background-position: 0 0;}
  100% {background-position: -660px 0;}
}

@-o-keyframes move-left {
  from {-o-transform: translateX(0);}
  to {-o-transform: translateX(-250px);}
}

@-o-keyframes frame-desk-car {
  0% {background-position: 0 0;}
  100% {background-position: 0 -2418px;}
}

@-o-keyframes frame-window {
  0% {background-position: 0 0;}
  100% {background-position: -354px 0;}
}

@-o-keyframes roll-wheel {
  0%{-o-transform: rotate(0deg); opacity: 1;}		
  100% {-o-transform: rotate(360deg); opacity: 1;}		
}

@-o-keyframes fade-in {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}

@-o-keyframes mask-in {
  0% {background-position: 0 -50px; opacity: 0;} 
  100% {background-position: 0 -25px; opacity: 1;}
}

@-o-keyframes rotate-arm {
  0%{-o-transform: rotate(0deg); -o-transform-origin: 0% 0%; opacity: 1;}		
  100% {-o-transform: rotate(-10deg); -o-transform-origin: 0% 0%; opacity: 1;}		
}


/* STANDARD */

@-keyframes frame-animation {
  0% {background-position: 0 0; } 
  100% {background-position: 0 -4920px; }
}

@-keyframes frame-girl-1 {
  0% {background-position: 0 0; } 
  100% {background-position: -364px 0; }
}

@-keyframes frame-girl-2 {
  0% {background-position: 0 0; opacity: 1; }
  100% {background-position: -364px 0; opacity: 1; }
}

@-keyframes frame-clock-lamp {
  0% {background-position: 0 0;}
  100% {background-position: -660px 0;}
}

@-keyframes move-left {
  from {-transform: translateX(0);}
    to {-transform: translateX(-250px);}
    }

    @-keyframes frame-desk-car {
      0% {background-position: 0 0;}
      100% {background-position: 0 -2418px;}
    }

    @-keyframes frame-window {
      0% {background-position: 0 0;}
      100% {background-position: -354px 0;}
    }

    @-keyframes roll-wheel {
      0%{-transform: rotate(0deg); opacity: 1;}		
        100% {-transform: rotate(360deg); opacity: 1;}		
        }

        @-keyframes fade-in {
          0% {opacity: 0;} 
          100% {opacity: 1;}
        }

        @-keyframes mask-in {
          0% {background-position: 0 -50px; opacity: 0;} 
          100% {background-position: 0 -25px; opacity: 1;}
        }

        @-keyframes rotate-arm {
          0%{-transform: rotate(0deg); -transform-origin: 0% 0%; opacity: 1;}		
            100% {-transform: rotate(-10deg); -transform-origin: 0% 0%; opacity: 1;}		
            }
<div id="ad">
  <div id="banner">
    <div id="headline1">
    </div>
    <div id="headline2">
    </div>
    <div id="tag-line">
    </div>
    <div id="wheel-l">
    </div>
    <div id="wheel-r">
    </div>
    <div id="desk-car">
    </div>
    <div id="girl-arm">
    </div>
    <div id="girl-1">
    </div>
    <div id="girl-2">
    </div>
    <br>
    <div id="clock-lamp">
    </div>
    <div id="clock2">
    </div>

    <div id="window-l">
    </div>
    <div id="window-r">
    </div>
    <div class="sub-copy">To enter, open a CommSec International Account and <br/> place a trade from <strong>US$19.95</strong>.
    </div>
    <div id="dis">
    </div>


    <div class="buttons">
      <button id="clickthrough-button" class="button clickthrough">Find out more »
      </button>
    </div>
    <div id="logo"></div>
  </div>
</div>
    
-webkit-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
-moz-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
-ms-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
-o-animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;
animation: roll-wheel 1.5s linear 3.3s 5 none,  fade-in .1s ease 6s 1 reverse forwards;

上面的 CSS 是用于在 Chrome 中不工作的轮子动画。有人可以帮助我如何解决 Chrome 车轮旋转问题。这是JSFiddle 版本。

screencast 显示我在 Chrome 中看到了这个。

【问题讨论】：

  • 它对我来说工作正常，我正在使用 chrome
  • 什么是“即使在汽车消失之后”？如果汽车不见了，你就看不到轮子了。否则，它对我有用。
  • 当车开走时，我仍然看到车轮在转动。
  • 请看我如何看这个动画的截屏视频screencast.com/t/dkpgTLZuKTdg
  • 在 chrome 上也可以正常工作。我的版本是 46.0.2490.80

标签： html css google-chrome css-animations


【解决方案1】：

这似乎是旧版 Chrome（直到 v38）中的一个错误，现在似乎已经修复（基于要质疑的 cmets）。但是，您需要注意以下几点：

  • 滚轮动画的持续时间为 1.5 秒，应该在延迟 3.3 秒后开始。动画有 5 次迭代，因此整个动画仅在开始后 10.8 秒后才有效完成（3.3 秒 + (1.5 秒 * 5)）。
  • 淡入动画的持续时间为 0.1 秒，应该在延迟 6 秒后开始。由于这个动画，该元素应该在 6.1 秒标记处淡出视图。 （但由于旧版本中的一些错误，这不会发生）。
  • 现在，如果您仔细观察，在 6.1 秒时，甚至滚动轮动画的 2 次迭代都不会完成，因此设置的迭代次数并没有多大意义，需要减少，但即使我们将其减少到 2，动画将仅在 6.3 秒时结束。因此，将滚轮动画的持续时间更改为 1.4 秒，并将迭代次数设置为 2。这应该可以解决问题。
  • 在下面的 sn-p 中，我只对-webkit-animation 进行了更改，但这应该适用于所有浏览器。我在 Chrome、Firefox 中测试过，但请在修改其他版本之前先测试一下。

现在回到错误本身，理想情况下，当多个动画修改同一个属性时，最后指定的那个应该优先。因此，在这种情况下，淡入动画中的opacity 更改应该优先考虑并淡出轮子，但它没有发生。所以，我们剩下的唯一解决方案是修改滚轮动画的持续时间和迭代，以确保它在淡入完成的同时完成。

根据W3C Spec

如果在某个时间点有多个动画为同一属性指定行为，则动画名称值中最后出现的动画将覆盖该点的其他动画。

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0px;
}
#headline1,
#headline2 {
  background-image: url(http://i.share.pho.to/6846bb0a_o.png);
  background-repeat: no-repeat;
  width: 261px;
  height: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
}
#headline1 {
  -webkit-animation: fade-in .1s ease 6s 1 reverse forwards;
  -moz-animation: fade-in .1s ease 6s 1 reverse forwards;
  -o-animation: fade-in .1s ease 6s 1 reverse forwards;
  animation: fade-in .1s ease 6s 1 reverse forwards;
}
#headline2 {
  background-position: 0px -25px;
  top: 40px;
  -webkit-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  -moz-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  -o-animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
  animation: mask-in .5s ease-out 3s 1 normal both, fade-in .1s linear 6s 1 reverse both;
}
button {
  background: #FFCB05;
  height: 34px;
  width: 130px;
  border: none;
  z-index: 999;
  border-radius: 17px;
  color: #000;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-animation: fade-in 1s ease 7s 1 both;
  -moz-animation: fade-in 1s ease 7s 1 both;
  -o-animation: fade-in 1s ease 7s 1 both;
  animation: fade-in 1s ease 7s 1 both;
}
button:hover,
button:active {
  background-color: #FFD716;
}
.sub-copy {
  color: #FFF;
  position: absolute;
  margin-left: 25px;
  top: 40px;
  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#dis {
  background-image: url(http://i.share.pho.to/4516683d_o.jpeg);
  background-repeat: no-repeat;
  width: 138px;
  height: 19px;
  position: absolute;
  margin-left: 22px;
  top: 206px;
  -webkit-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  -o-animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
  animation: fade-in 1s ease 6s 1 both, fade-in .5s ease 10s 1 reverse forwards;
}
#logo {
  background-image: url(http://i.share.pho.to/306d2b9c_o.png);
  background-repeat: no-repeat;
  width: 103px;
  height: 26px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
#tag-line {
  background-image: url(http://i.share.pho.to/e62322ba_o.jpeg);
  background-repeat: no-repeat;
  width: 207px;
  height: 40px;
  position: absolute;
  bottom: 153px;
  left: 14px;
  -webkit-animation: fade-in 1s ease 10.5s 1 both;
  -moz-animation: fade-in 1s ease 10.5s 1 both;
  -o-animation: fade-in 1s ease 10.5s 1 both;
  animation: fade-in 1s ease 10.5s 1 both;
}
#girl-arm {
  position: absolute;
  top: 141px;
  left: 133px;
  width: 9px;
  height: 5px;
  z-index: 7;
  opacity: 0;
  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
  background-repeat: no-repeat;
  background-position: -37px -34px;
  -webkit-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  -moz-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  -o-animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
  animation: rotate-arm .15s ease-out .5s 10 alternate none, fade-in .01s ease 2s 1 reverse forwards;
}
#girl-1 {
  position: absolute;
  top: 107px;
  left: 96px;
  width: 84px;
  height: 85px;
  background-image: url(http://i.share.pho.to/5a840ac3_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock-lamp {
  position: absolute;
  top: 104px;
  left: 184px;
  width: 24px;
  height: 88px;
  background-image: url(http://i.share.pho.to/d264b4e6_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#clock2 {
  position: absolute;
  top: 74px;
  left: 181px;
  width: 29px;
  height: 117px;
  background-image: url(http://i.share.pho.to/24b90b3c_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -o-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  -ms-animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
  animation: fade-in 1s ease 3s 1 both, move-left 11s ease 3s 1 both, fade-in .5s ease 5.8s 1 reverse forwards;
}
#desk-car {
  position: absolute;
  top: 102px;
  left: 33px;
  width: 204px;
  height: 90px;
  z-index: 5;
  background-image: url(http://i.share.pho.to/0c2e3ceb_o.png);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
  -moz-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
  -o-animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
  animation: fade-in 1s ease 3s 1 both, fade-in .5s ease 6s 1 reverse forwards;
}
#window-l,
#window-r {
  position: absolute;
  top: 79px;
  width: 59px;
  height: 69px;
  background-image: url(http://i.share.pho.to/4bf00ac7_o.gif);
  background-repeat: no-repeat;
  -webkit-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -moz-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  -o-animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
  animation: fade-in 1s ease .1s 1 both, fade-in .7s ease 3s 1 reverse forwards;
}
#window-l {
  left: 18px;
}
#window-r {
  left: 218px;
}
#wheel-l,
#wheel-r {
  position: absolute;
  top: 157px;
  width: 32px;
  height: 33px;
  opacity: 0;
  z-index: 9;
  background-image: url(http://i.share.pho.to/08185b2c_o.png);
  background-repeat: no-repeat;
  -webkit-animation: roll-wheel 1.4s linear 3.3s 2 none, fade-in .1s ease 6s 1 reverse forwards;
  -moz-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
  -o-animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
  animation: roll-wheel 1.5s linear 3.3s 5 none, fade-in .1s ease 6s 1 reverse forwards;
}
#wheel-l {
  left: 57px;
}
#wheel-r {
  left: 184px;
}
#ad {
  display: block;
  border: rgb(145, 153, 153) 1px solid;
  overflow: hidden;
  cursor: pointer;
  width: 298px;
  height: 248px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#banner {
  position: absolute;
  display: block;
  width: 300px;
  height: 250px;
  background-color: #000;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.buttons {
  position: absolute;
  z-index: 20;
  top: 110px;
  left: 20px;
}
/* ANIMATIONS */

/* WEBKIT */

@-webkit-keyframes frame-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4920px;
  }
}
@-webkit-keyframes frame-girl-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -364px 0;
  }
}
@-webkit-keyframes frame-girl-2 {
  0% {
    background-position: 0 0;
    opacity: 1;
  }
  100% {
    background-position: -364px 0;
    opacity: 1;
  }
}
@-webkit-keyframes frame-clock-lamp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -660px 0;
  }
}
@-webkit-keyframes move-left {
  from {
    -webkit-transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-250px);
  }
}
@-webkit-keyframes frame-desk-car {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2418px;
  }
}
@-webkit-keyframes frame-window {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -354px 0;
  }
}
@-webkit-keyframes roll-wheel {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes mask-in {
  0% {
    background-position: 0 -50px;
    opacity: 0;
  }
  100% {
    background-position: 0 -25px;
    opacity: 1;
  }
}
@-webkit-keyframes rotate-arm {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: 0% 0%;
    opacity: 1;
  }
}
/* MOZ */

@-moz-keyframes frame-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4920px;
  }
}
@-moz-keyframes frame-girl-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -364px 0;
  }
}
@-moz-keyframes frame-girl-2 {
  0% {
    background-position: 0 0;
    opacity: 1;
  }
  100% {
    background-position: -364px 0;
    opacity: 1;
  }
}
@-moz-keyframes frame-clock-lamp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -660px 0;
  }
}
@-moz-keyframes move-left {
  from {
    -moz-transform: translateX(0);
  }
  to {
    -moz-transform: translateX(-250px);
  }
}
@-moz-keyframes frame-desk-car {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2418px;
  }
}
@-moz-keyframes frame-window {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -354px 0;
  }
}
@-moz-keyframes roll-wheel {
  0% {
    -moz-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: rotate(360deg);
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes mask-in {
  0% {
    background-position: 0 -50px;
    opacity: 0;
  }
  100% {
    background-position: 0 -25px;
    opacity: 1;
  }
}
@-moz-keyframes rotate-arm {
  0% {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -moz-transform: rotate(-10deg);
    -moz-transform-origin: 0% 0%;
    opacity: 1;
  }
}
/* ms */

@-ms-keyframes frame-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4920px;
  }
}
@-ms-keyframes frame-girl-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -364px 0;
  }
}
@-ms-keyframes frame-girl-2 {
  0% {
    background-position: 0 0;
    opacity: 1;
  }
  100% {
    background-position: -364px 0;
    opacity: 1;
  }
}
@-ms-keyframes frame-clock-lamp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -660px 0;
  }
}
@-ms-keyframes move-left {
  from {
    -ms-transform: translateX(0);
  }
  to {
    -ms-transform: translateX(-250px);
  }
}
@-ms-keyframes frame-desk-car {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2418px;
  }
}
@-ms-keyframes frame-window {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -354px 0;
  }
}
@-ms-keyframes roll-wheel {
  0% {
    -ms-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -ms-transform: rotate(360deg);
    opacity: 1;
  }
}
@-ms-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes mask-in {
  0% {
    background-position: 0 -50px;
    opacity: 0;
  }
  100% {
    background-position: 0 -25px;
    opacity: 1;
  }
}
@-ms-keyframes rotate-arm {
  0% {
    -ms-transform: rotate(0deg);
    -ms-transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -ms-transform: rotate(-10deg);
    -ms-transform-origin: 0% 0%;
    opacity: 1;
  }
}
/* O */

@-o-keyframes frame-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4920px;
  }
}
@-o-keyframes frame-girl-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -364px 0;
  }
}
@-o-keyframes frame-girl-2 {
  0% {
    background-position: 0 0;
    opacity: 1;
  }
  100% {
    background-position: -364px 0;
    opacity: 1;
  }
}
@-o-keyframes frame-clock-lamp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -660px 0;
  }
}
@-o-keyframes move-left {
  from {
    -o-transform: translateX(0);
  }
  to {
    -o-transform: translateX(-250px);
  }
}
@-o-keyframes frame-desk-car {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2418px;
  }
}
@-o-keyframes frame-window {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -354px 0;
  }
}
@-o-keyframes roll-wheel {
  0% {
    -o-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -o-transform: rotate(360deg);
    opacity: 1;
  }
}
@-o-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes mask-in {
  0% {
    background-position: 0 -50px;
    opacity: 0;
  }
  100% {
    background-position: 0 -25px;
    opacity: 1;
  }
}
@-o-keyframes rotate-arm {
  0% {
    -o-transform: rotate(0deg);
    -o-transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -o-transform: rotate(-10deg);
    -o-transform-origin: 0% 0%;
    opacity: 1;
  }
}
/* STANDARD */

@keyframes frame-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4920px;
  }
}
@keyframes frame-girl-1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -364px 0;
  }
}
@keyframes frame-girl-2 {
  0% {
    background-position: 0 0;
    opacity: 1;
  }
  100% {
    background-position: -364px 0;
    opacity: 1;
  }
}
@keyframes frame-clock-lamp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -660px 0;
  }
}
@keyframes move-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-250px);
  }
}
@keyframes frame-desk-car {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -2418px;
  }
}
@keyframes frame-window {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -354px 0;
  }
}
@keyframes roll-wheel {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mask-in {
  0% {
    background-position: 0 -50px;
    opacity: 0;
  }
  100% {
    background-position: 0 -25px;
    opacity: 1;
  }
}
@keyframes rotate-arm {
  0% {
    transform: rotate(0deg);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: rotate(-10deg);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
<div id="ad">
  <div id="banner">
    <div id="headline1">
    </div>
    <div id="headline2">
    </div>
    <div id="tag-line">
    </div>
    <div id="wheel-l">
    </div>
    <div id="wheel-r">
    </div>
    <div id="desk-car">
    </div>
    <div id="girl-arm">
    </div>
    <div id="girl-1">
    </div>
    <div id="girl-2">
    </div>
    <br>
    <div id="clock-lamp">
    </div>
    <div id="clock2">
    </div>
    <div id="window-l">
    </div>
    <div id="window-r">
    </div>
    <div class="sub-copy">To enter, open a CommSec International Account and
      <br/>place a trade from <strong>US$19.95</strong>.
    </div>
    <div id="dis">
    </div>
    <div class="buttons">
      <button id="clickthrough-button" class="button clickthrough">Find out more »
      </button>
    </div>
    <div id="logo"></div>
  </div>
</div>

【讨论】：

  • 感谢您的详细解释，但现在 safari 似乎遇到了一个问题，即汽车一直停留到最后一帧并且不会让 @Harry 失望
  • @OwaisAhmed：但是关于你的车本身，我没有做任何改变。我只更改了与 wheel-l 和 wheel-r 对应的部分。您可能需要为汽车创建一个单独的问题。如果您对轮子的行为感到满意，请考虑接受此答案并为另一个创建单独的线程。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-08-07
  • 2023-03-28
  • 2013-05-29
  • 2019-06-23
  • 1970-01-01
  • 2014-04-03
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode