CSS3 Animation help

HTML & CSS
1

Hello

I am trying to make a little easter egg type feature on a site I am making.

I want to have a little train sit on the bottom left of the website footer… when someone hovers over the train it should roll away to the right side. I have a very rough version of this now, but I need to make it better and I am sure are better ways than my implementation.

Basically the train image sits inside a div like this:


<div id="axis" class="one">
      <img class="object move-right" src="images/train.png"/>
</div>

The CSS animation code is as follows:


.object {
    position: absolute;
}

#axis:hover .move-right{
    transform: translate(880px,0);
    -webkit-transform: translate(880px,0); /** Chrome & Safari **/
    -o-transform: translate(880px,0); /** Opera **/
    -moz-transform: translate(880px,0); /** Firefox **/
}


.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
   border:none;
}

In Chrome and Safari the train moves smoothly (although once you hover over the train you cannot move the mouse again or else it stops and returns back).

In Firefox it is jumpy and doesnt really work. In IE9 it does not work at all.

Any help on how to make this better would be greatly appreciated.

2

Hi

I can’t test it as I don’t run IE but you will need to add the ie prefixes -ms-transform:

As for the jerkyness, Firefox struggles with this but apparently (discussed here) if you add any rotate to it it should smooth out but I’m not entirely sure http://jsfiddle.net/richaskew/AQ8FA/

3

Thanks for your reply. I tried playing with it a bit more, but I think I will leave it for now, can’t seem to get it to go smoothly in all browsers.

I will revisit it another time.

4

The flaw in your logic is that you absolutely positioned the image which means that as soon as you hover the image it moves and #axis no longer has any content and therefore nothing to hover so the animation stops. Remove the absolute positioning or set a height on #axis to match the height of the image.