0

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.

Jeremy Kuhar
  • 1

1 Answers1

0

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/

Jonathan Marzullo
  • 6,879
  • 2
  • 40
  • 46
  • I've already included the animation-duration and animation-delay properties in the code I posted above. Adding animation-fill-mode doesn't fix the problem, nor would I expect it to. – Jeremy Kuhar Oct 16 '13 at 16:31
  • animation-delay is located in the HTML DIV tag (because I was adding a php random value) and the animation-duration is in the STYLE tag for div.ticker. – Jeremy Kuhar Oct 16 '13 at 16:38
  • I think I've figured it out. The code: @-webkit-keyframes tickup { from { -webkit-transform: -webkit-translateY(0px); } to { -webkit-transform: -webkit-translateY(1000px); } } should not have the -webkit- prefix before the translateY property. I could have sworn I saw the prefix used for translateY, but I guess I was wrong. – Jeremy Kuhar Oct 16 '13 at 17:02