The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Slow Me

  • # July 7, 2013 at 6:50 am

    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;


    } .rotate:hover
    { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }

    how can we slow down the Rotation it runs very fast

    # July 7, 2013 at 7:05 am


    To slow down the rotation you should change the transition duration.

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    Hope this helps :)

    # July 7, 2013 at 7:12 am

    nothing happend result is same

    # July 7, 2013 at 7:18 am

    Could you please provide me with the context of your problem. It would be useful if you could make a [CodePen]( “codepen”) for me to have a look at or something similar.

    It could be that there is another css rule you have not told me about that is effecting your results.

    # July 7, 2013 at 7:26 am

    # July 7, 2013 at 7:37 am

    change the 200ms to a larger number 1000ms is one second

    # July 7, 2013 at 7:37 am

    I have updated your pen here: []( “”)

    It seems that you had some styling as I suspected in another rule. IDs take priority over classes and so your rules where not effecting it.

    transition: all 200ms linear;

    is shorthand for:

    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: linear;


    # July 7, 2013 at 7:53 am

    thanx man

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed