W3C home > Mailing lists > Public > www-style@w3.org > April 2010

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Fri, 23 Apr 2010 08:41:27 -0700
Cc: www-style list <www-style@w3.org>
Message-Id: <16EDC783-5A11-458F-86E4-AEC5D79A9A0D@gmail.com>
To: Lars Gunther <gunther@keryx.se>

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>




Received on Friday, 23 April 2010 15:42:05 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT