CSS Animations Work in IE10 and Firefox, NOT in Webkit Browsers

Question

this is my first time posting. I've searched and trouble shooted for the past two hours, but haven't been able to solve my problem. I suspect it's something stupid and simple, but I just can't find the error.

This is an excerpt from my testing page http://www.enviroprofit.com/sandbox.php. The rss feed blocks in the lower-right of the screen are supposed to scroll through the headline within the block. This action works properly in IE10 and Firefox.

I've added the -webkit- properties to the CSS, but they don't seem to work.

        <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; " >

Don't worry if the tags don't match up. The HTML is just an excerpt from php script. Thanks much.

Answer 1

animations are supported in -webkit browsers:

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

also you missing the properties animation-duration, animation-delay and animation-fill-mode for -webkit browsers

or you could try using the shorthand animation property

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/