SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Animation help

    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:

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

    The CSS animation code is as follows:

    Code:
    .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. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RichardAskew View Post
    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/

    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Zapppa View Post

    Any help on how to make this better would be greatly appreciated.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •