locked
CSS3 transition on top and left is not working

    Question

  • Why in this example the top and left not being transitioned properly?

    Background colour is transitioned just fine whereas top and left do not.

    <html>
    <body>
    <div id="content_shell">
    Content
    <style>
    a.foo {
    padding:50px 50px;
    background:#f00;
    transition: all 5s ease-in-out;
    ; 
    }
    a.foo:hover {
    background:#0094ff;
    top:10px;
    left:10px;
    }
    </style>
    <a class="foo">transition</a>
    </div>
    </body>
    </html>


    • Edited by Dmitry_M Friday, February 8, 2013 2:24 PM
    Friday, February 8, 2013 2:24 PM

Answers

  • Bug.

    You have to specify top:0;left:0 to make it work.

    Good start with IE10, which engine I assume is used in Metro app but I still find more bugs and inconsistencies than other major browsers.

    <html>
    <body>
    <div id="content_shell">
    Content
    <style>
    a.foo {
    padding:50px 50px;
    background:#f00;
    transition: all 5s ease-in-out;
    top:0px;
    left:0px; 
    }
    a.foo:hover {
    background:#0094ff;
    top:10px;
    left:10px;
    }
    </style>
    <a class="foo">transition</a>
    </div>
    </body>
    </html>

    • Marked as answer by Dmitry_M Friday, February 8, 2013 3:00 PM
    Friday, February 8, 2013 3:00 PM