Grow your CSS skills. Land your dream job.

Rotate div on page load

  • # June 26, 2013 at 6:04 pm

    Hi, I want to rotate a div using @keyframes on the page load, but I just can’t get it to work. Any ideas of how to code? :/

    # June 26, 2013 at 6:18 pm

    1 -make a class holding the animation declaration.

    2 – on page load add that class to the element you want

    3 – enjoy the magic.

    //CSS
    .className{
    animation:turn 1s linear;
    }

    @keyframes turn{
    100%{transform:rotate(360deg)}
    }
    //jQuery
    $(function(){
    $(‘.myElement’).addClass(‘className’);
    });

    note that animation keyframes and transform require vendor prefixes

    # June 26, 2013 at 7:28 pm

    Hmm.. Still can’t get it to work.. As you can see in the example here.

    # June 26, 2013 at 7:48 pm

    you have a javascript error on your page

    trying to set the height of section with a mix of vanilla js and jquery.

    either

    $(‘section’)[0].style.height = ‘100% – ‘ + $(‘header’).style.height + ‘px'; // added a [0] after the jquery selector

    or

    $(‘section’).css(‘height’, ‘100% – ‘ + $(‘header’).style.height + ‘px’);

    note you dont have a section to your document

    # June 26, 2013 at 8:30 pm

    Oh, yeah, that’s my original js file that I also use for the main index file

    # June 27, 2013 at 10:45 am

    I figured it out by myself, you can see it [here](http://www.poxmedia.net/ “Here”). The button in the top left corner spins every minute :P

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".