CSS3動畫縮放比例在Safari中無法正常工作

所需效果在Firefox和Chrome中運行，但不在Safari中運行。CSS3動畫縮放比例在Safari中無法正常工作

的動畫表現如下：

潘立即向左
放大
慢慢搖到右
縮小

這些所有的工作很好，除了在Safari中，沒有縮小。我不能爲了我的生活找出原因。請，任何幫助表示讚賞。

 #frame { 
      position:relative; 
      width:660px; 
      margin:5% auto 0; 
      height:177px; 
      border:1px solid #999; 
      overflow:hidden; 
      -webkit-transform:scale(.5); 
     } 

     .paper { 
      position:absolute; 
      top:0; 
      left:0; 
      width:660px; 
      height:177px; 
     } 

     .scribble { 
      position:absolute; 
      top:0; 
      left:0; 
      width:0; 
      height:177px; 
     } 

     .green { 
      background:url(scribble1.png) no-repeat 0 0; 
      top:0; 
      } 

     .red { 
      background:url(scribble2.png) no-repeat 0 0; 
      top:45px; 
      } 

     .blue { 
      background:url(scribble3.png) no-repeat 0 0; 
      top:82px; 
      } 

    /* 
    * Add Zoom-in Routine 
    * 
    */ 
     @-webkit-keyframes zoomin { 
      0% { 
       -webkit-transform: scale(1); 
      } 
      100% { 
       -webkit-transform: scale(2); 
      } 
     } 

    /* 
    * Add Zoom-out Routine 
    * 
    */ 
     @-webkit-keyframes zoomout { 
      0% { 
       -webkit-transform: scale(2); 
      } 
      100% { 
       -webkit-transform: scale(1); 
      } 
     } 

    /* 
    * Add Pan Routine 
    * 
    */ 
     @-webkit-keyframes pan { 
      0% { 
       left:660px; 
      } 
      50% { 
       left:-80px; 
      } 
      100% { 
       left:0; 
      } 
     } 

    /* 
    * Add Draw Routine 
    * 
    */ 
     @-webkit-keyframes draw { 
      0% { 
       width:0; 
      } 
      100% { 
       width:660px; 
      } 
     } 

    /* 
    * Begin Animation 
    * 
    */ 

     .paper { 
      -webkit-animation: 
       pan 10s ease-out, 
       zoomin 3s ease, 
       zoomout 5s 5s ease; 
      -webkit-animation-fill-mode:forwards; 
     }   
     .green { 
      -webkit-animation:draw 10s ease; 
      -webkit-animation-fill-mode:forwards; 
     } 
     .red { 
      -webkit-animation:draw 9s linear; 
      -webkit-animation-fill-mode:forwards; 
     } 
     .blue { 
      -webkit-animation:draw 8s ease-in-out; 
      -webkit-animation-delay:2s; 
      -webkit-animation-fill-mode:forwards; 
     }

<body> 

    <div id="frame"> 
     <div class="paper"> 
      <div class="scribble blue"></div> 
      <div class="scribble green"></div> 
      <div class="scribble red"></div> 
     </div> 
    </div> 

</body> 
</html>

演示和生動的代碼可以被看作在：http://blindmikey.com/dev/animation/scribbles2.php

來源

2011-09-30 blindmikey

這是*很多代碼。縮短評論意見並刪除與問題無關的部分可能會更好。 –

在Safari上使用Safari Desktop，Safari iOS（因爲它不支持動畫填充模式而生澀結尾）以及Chrome – Duopixel