css3 animation on element focus

Question

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');
});

Comments

[Zach Saucier]

That isn't what the OP is looking for. He's looking for an animated open and have the content remain shown afterwards. Your solution is more of a detriment than any help

[Morten Hagh]

Sweet! Works like a treat! It is set to focus on the #animation section. And it starts when that section is focused. Thank you very much!

[ezekielDFM]

Well i'd say "the right way" is pretty subjective in this scenario. I'm sure the countless people that have used JQuery to quickly create solutions over the years were probably all just too lazy to write Vanilla JS. But since you are the expert, why don't you go ahead and respond with the "correct" answer and maybe the OP will rework their solution 2 years later. Thanks for your valuable contributions.