CSS動畫在IE10和Firefox中運行，不在Webkit瀏覽器中運行

這是我第一次發佈。我在過去的兩個小時裏搜索並發現了麻煩，但一直未能解決我的問題。我懷疑這是愚蠢和簡單的，但我找不到錯誤。CSS動畫在IE10和Firefox中運行，不在Webkit瀏覽器中運行

這是我的測試頁http://www.enviroprofit.com/sandbox.php的摘錄。屏幕右下角的rss供稿塊應該滾動瀏覽該塊內的標題。此操作在IE10和Firefox中正常運行。

我已經添加了-webkit-屬性到CSS，但他們似乎並沒有工作。

 <style type="text/css"> 
      @keyframes tickup { 
      from {transform: translateY(0px); } 
      to {transform: translateY(-1000px); } 
      } 
      @-webkit-keyframes tickup { 
      from { -webkit-transform: -webkit-translateY(0px); } 
      to { -webkit-transform: -webkit-translateY(1000px); } 
      } 
      div.ticker { 
      animation-name: tickup;     -webkit-animation-name: tickup; 
      animation-duration: 120s;    -webkit-animation-duration: 120s; 
      animation-direction: normal;   -webkit-animation-direction: normal; 
      animation-iteration-count: 50;   -webkit-animation-iteration-count: 50; 
      } 
     </style> 
     <div class="blog_block" style="width: 160px; height: 18px; overflow: hidden; "> 
      <a href="'.$feed_link.'" target="_blank"> 
      <div style="position:absolute; width:100%; height:100%; overflow: hidden; top:0; left: 0; z-index: 10; background-image: url(\'empty.gif\'); " ></div> 
      </a> 
      <img src="'.$feed_icon.'" width="15" style="float:left; " /> 
      <div class="ticker" style="animation-delay:'.$animation_start_time.'s; position:relative; width:120px; height:100%; padding-left: 10px; float:left; text-align: center; font-size: 12px; " >

不要擔心，如果標籤不匹配。 HTML只是php腳本的摘錄。非常感謝。

來源

2013-10-16 Jeremy Kuhar

動畫在-webkit瀏覽器支持：http://caniuse.com/#feat=css-animation –

動畫支持-webkit瀏覽器：

http://caniuse.com/#feat=css-animation

還缺少你的屬性動畫持續時間，動畫延遲和動畫填充模式爲-webkit瀏覽器

或者您可以嘗試使用速記動畫屬性

animation: <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>;

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://www.w3.org/TR/css3-animations/

來源

2013-10-16 16:03:55

我已經包括動畫持續時間和動畫延遲我在上面發佈的代碼中的屬性。添加動畫填充模式並不能解決問題，我也不會期望它。 –

animation-delay位於HTML DIV標記中（因爲我正在添加一個php隨機值），並且動畫持續時間位於div.ticker的STYLE標記中。 –

我想我已經想通了。代碼： @ -webkit-keyframes ticking {-webkit-transform：-webkit-translateY（0px）; } to {-webkit-transform：-webkit-translateY（1000px）; } } 在translateY屬性之前不應該有-webkit-前綴。我可以發誓我看到了用於translateY的前綴，但我想我錯了。 –

CSS動畫在IE10和Firefox中運行，不在Webkit瀏覽器中運行

回答

相關問題