CSS3 Animations • PADAWAN 2014

 

 

You don't need animations for simple effects

 

But animations are fun!

CSS animations are built using a list of "keyframe" moments where calculable properties are defined. The browser fills in the intermediate values.

Example:

.fadesample { 
	animation-name: fadeIn; 				// which named animation?
	animation-duration: 3s;        			// how long?
	animation-iteration-count:infinite;  	// keep going?
	} 
@keyframes fadeIn { 
	0% {opacity: 0;} // CSS properties at start
	100% {opacity: 1;} // CSS properties at end
	}     
<div class="examplebox fadesample"></div>

Fades in over 3 seconds from opacity 0 to opacity 1, then repeats.

 

...Chaining effects

You can animate multiple properties at once, and set multiple keyframes.

Example:

.menagerie { 
	animation-name: menagerie; 				// new animation name
	animation-duration: 5s;        			
	animation-iteration-count:infinite;  
	position:absolute;	
	} 
@keyframes menagerie { 
	0% {opacity: 0; background: #fff; left:0;} // start invisible at left
	25% {opacity: 1; background:#000;} // go black 
	50% {transform:rotate(0.5turn); left:80%; background:#ff0;} //spin, move, yellow
	75% {opacity: 1; background:#000;}	// reverse original motion
	100% {opacity: 0; background:#fff; left:0; transform:rotate(0); }// back to start
	}     
<div class="examplebox menagerie"></div>

 

Note: I could have skipped declaring the reverse keyframes, if I called the animation using a declared animation direction of "alternate" -- going 0--100--0 instead of 0-100, 0-100:

.menagerie2 { 
	animation-name: menagerie; 				
	animation-duration: 2.5s;        			
	animation-iteration-count:infinite;  
	animation-direction:alternate; //let's alternate back and forth!
	position:absolute;	
	} 
@keyframes menagerie2 { 
	0% {opacity: 0; background: #fff; left:0;} 
	50% {opacity: 1; background:#000;} 
	100% {transform:rotate(0.5turn); left:80%; background:#ff0;} 
	}     
<div class="examplebox menagerie2"></div>

Normal:

 

Alternate:

 

So you can kinda go nuts.

 

 

Other things you can do...

In the real world...

Well...in the real world, it's best to stick to things that can just be skipped in old IE (e.g., it just appears instead of fading in), or have some sort of JavaScript fallback (think modernizr). So: transitions and subtle effects for now, that <IE10 users won't miss. And don't forget browser prefixes -- you'll still need '-webkit' for most of this stuff.

 

And you needn't do it by hand. There are simple generators, and a whole Adobe product...