Re: Animations in CSS or the DOM - what does the DOM community say?

On Apr 23, 2010, at 6:09 AM, Lars Gunther wrote:

> The flow is for any real world usage of animation:
> 1. Define animation

<style>
@keyframes 'wiggle' {

    0% {
      margin-left: 0px;
    }

    33% {
      margin-left: -2px;
    }

    66% {
      margin-left: 2px;
    }

    100% {
      margin-left: 0px;
    }

  }
</style>

> 2. Set up event listener

<script> // load after button is drawn
	var w = document.getElementById('wiggler');
	w.addEventListener('click',function(){
		w.style.animation='wiggle .2s 5'; 
	},false );
	w.addEventListener('animationEnd',function(){
		w.style.animation='none'; 
	},false );

</script>

> 3. When a DOM event occurs, run the animation.

<button id="wiggler">Click Me</button>