Search code examples
htmlcsscss-animations

css3 animation on element focus

I am building a single page website and in a section of that site I have a CSS animation 

.animation {
    background-color: #54a3f7;
    -webkit-animation: html 2s ease-in-out;
}

set with 

@-webkit-keyframes html {
   0% { width: 0%;} 
   100% { width: 100%; }
}

I have a working example here: http://jsfiddle.net/RqH5H/

My problem is that this animation will (of course) start at window load, but I want it to start when the user clicks on the top menu and wants to see <section id="animations"> So when the user clicks on "Animation" it will scroll down to that section at start the animation

Solution

  • You will need Javascript to make this happen. You can add the class the points to CSS animation on click (or whatever interaction event you wish). I have put together a basic JSFiddle to demonstrate:

    Note: jQuery is used.

    http://jsfiddle.net/zensign/sg9ty/1/

    $('#start-btn').click(function () {
     $('#animate-me').addClass('animation');
});