CSS3 Animationen

CSS3 Animationen können sehr aufwendig sein, da alle Browser ein Prefix brauchen. Prefixfree ist ein kostenlos verfügbares Javascript Lea Veru (Animatable), das es erlaubt, CSS stets ohne Prefixing zu schreiben.

@keyframes resize{
  0% {
	  text-shadow: 0  0 20px #000;
	  transform: rotate(10deg);
	  }
  20% {
	  text-shadow: 0  0 1px #000;
	  transform: rotateX(-180deg);
  }	  
  50% {
	  text-shadow: 0  0 10px #555;
	  transform: rotate(0deg);
	  font-size:4em; 
 }
  80% {
	  text-shadow: 40px 20px 1px #555, 
	  30px -20px 1px #ff6677, 
	  0 0 20px #ff6677,  
	  1px 1px  2px #999; 
	  transform: rotate(-5deg);
	  } 
}

#box{
   font-size:2em; 
   transform: rotate(0deg); 
   animation-name: resize;
   animation-duration: 5s;
   animation-iteration-count: 5;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
   }
short: animation: resize 5s 5 alternate ease-in-out;
 

Mit animation-iteration-count wird die Anzahlt der Animationen angegeben. infinite spielt die Animation unendlich viele male ab.

  
animation-iteration-count: 5;
animation-iteration-count:infinite;