Question

这是我第一次发帖。我在过去的两个小时内搜索过并遇到了麻烦，但未能解决我的问题。我怀疑这是一件愚蠢而简单的事，但我找不到错误。

这是我的测试页http://www.enviroprofit.com/sandbox.php的摘录。屏幕右下角的rss feed块应该滚动到块内的标题。此操作在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脚本的摘录。非常感谢。

Answer 1

-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/

CSS动画在IE10和Firefox中工作，而不是在Webkit浏览器中工作

1 个答案: