0

这是我第一次发帖。在过去的两个小时里，我已经搜索并解决了问题，但无法解决我的问题。我怀疑这是愚蠢而简单的事情，但我找不到错误。

这是我的测试页面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 脚本的摘录。非常感谢。

4

1 回答 1

0

-webkit 浏览器支持动画：

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

您还缺少-webkit 浏览器的属性animation-duration、animation-delay和animation-fill-mode

或者您可以尝试使用速记动画属性

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-16T16:03:55.390 回答