CSS Animations – The Biggest Mistake


Warning: gzinflate() [function.gzinflate]: data error in /home/boozkerc/public_html/kneedeepincode/wp-includes/http.php on line 1787

cssanimations

What seems like ages ago, HTML was born. HTML provided a way to structure content and display data. HTML started getting boring and people started hacking it. To suit the needs of the expanding web and the desperate need for web site customization, tags and customization, or stylization, tools came out promptly such as <font>,<center>, and the infamous <blink> and <marquee> tags. Hacking continued and people discovered they could add images to <table>s and combined with all the previous tags could come up with pretty nice looking sites with the expense of completely draining HTML from it’s original application.

After years of this there was a need to separate the structure from the stylization because HTML was getting bloated with functions that were out of the scope of HTML. There needed to be a way to create good looking sites without hacking together a complex table structure. This is where CSS comes in. CSS, or Cascading Style Sheet, was finally a cleaner and more functional way of styling elements on a web page.

With CSS you could finally separate the data and structure that was meant for HTML. It still isn’t perfect after over 10 years, but it was a huge leap forward. This was probably the greatest thing to happen to the web since HTML. To this day there are still arguments for table layouts and I’m constantly finding even the most knowledgeable coders using <b> an <i> over <strong> and <em> and think they are the same thing.

With this in mind, I can’t find any reason for CSS Animations. CSS Animations are clearly out of the scope of CSS. I fervently believe that CSS Animations will be another mistake as were HTML styles. Animations are NOT styles and styles are NOT animations and we should not be animating the STYLES of a web page anyways.

I believe a separate language would make far more sense and would allow all of us to scale it at a separate pace from CSS. The only logical argument for CSS Animations is the fact that animating now with JavaScript is actually only changing the CSS so fast that it looks like it’s animating. Well, yeah, but that doesn’t mean it’s the right way. We need a real animation section added to our standards, not just some lazy excuse for a patch so we can say we are separating presentation from the structure.

Please, heed this warning. It will be a mistake.

However, here are some examples I put together of possible alternate solutions:

AML (Animation Markup Language) [prototype 0.3]
Description: AML is a simple XML based markup language for animating DOM elements on a web page. They can be called on load or called asynchronously or even asynchronously in groups with JavaScript.
Pros: Easy to read, quick to learn, easy to implement a parser since it’s XML based
Include in HTML <head> with: <link rel=”animation” href=”path/to/dir/main.aml” type=”text/aml” title=”Main AML File”>
Cons: Bulky, harder to add more features in the future.
Example:

<aml>
	<!-- 
		Since it is not in a group, these will run on load,
		JavaScript example: 
                this.animate(helloWorld);
		and could be called again using the name
	-->
	<move name="helloWorld" for="#anySelector" top="-=5em" left="50%" time="5000" easing="easeInOutElastic" />
 
	<!-- 
		Called from JavaScript using the name e.g. this.animate(intro);
		This would run all of the animations inside the group
		"for" and "name" attributes are optional inside a "group" node
		Like above, you could also use a "for" attribute and a selector
		for the value 
	-->
	<group name="intro">
		<size amount="+=100px" time="2000" easing="easeInBounce" />
		<opacity amount="0" time="500" />
	</group>
</aml>

ASL (Animation Markup Language) [concept]
Description: ASL is a loose typed scripting language for animating elements on a web page.
Pros: Faster, less type, smaller file size, easily extendable
Cons: Not as easy to learn, harder to memorize
Include in HTML <head> with:<link rel=”animation” href=”path/to/dir/main.asl” type=”text/asl” title=”Main ASL Script”>
Example:

<script type="text/asl">
	//This would do the exact same thing as above, but could _not_ be called asynchronously.
	//Think of "animate" as echo or print
	animate '#anySelector'.move({top:'-=5em',left:'50%'},5000,'easeInOutElastic');
 
	//Just like the line above, except this held in a group and could then be called with JavaScript OR with ASL
	//"helloWorld" is the name and "helloWorld" = a new animation group object
	$helloWorld = '#anySelector'.group(
		move({top:'-=5em',left:'50%'},5000,'easeInOutElastic');
	)
 
	//Animates the above animation group "helloWorld"
	animate $helloWorld;
 
	/*
		Could be called with JS like (does not need $ since it's assumed):
		animate('helloWorld');
	*/
 
	//Same as the intro animation in the above AML example
	$intro = group(
		size('+=100px',2000,'easeInBounce');
		opacity(0,500);
	)
 
	//To call above you would do something like:
	animate '#anySelector'.$intro;
 
	//Added bonus, you could call only one part of it to save space because it's basically an animation array
	animate '#anySelector'.$intro[1]; //Only animates the opacity
 
	/*
		JavaScript examples:
		"this" is your selector you somehow selected with JS
		In this case it would be #anySelector
		this.animate('intro');
		this.animate('intro')[1];
	*/
</script>

[Post to Twitter]   [Post to Delicious]   [Post to Digg]   [Post to Reddit]   [Post to StumbleUpon]  

Posted in CSS, Philosophy, Programming, Technology