Code Snippet

WebKit Keyframe Animation Syntax

Basic Declaration & Usage

@-webkit-keyframes NAME-YOUR-ANIMATION {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#box {
     -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
}

Multiple steps

@-webkit-keyframes fontbulger {
	0% {
		font-size: 10px;
	}
	30% {
		font-size: 15px;
	}
	100% {
		font-size: 12px;
	}
}

#box {
     -webkit-animation: fontbulger 2s infinite;
}

If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@-webkit-keyframes fontbulger {
	0%, 100% {
		font-size: 10px;
	}
	50% {
		font-size: 12px;
	}
}

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.

Calling keyframe animation with separate properties

#box {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;
 -webkit-animation-delay: 2s;
}

Animation Shorthand

Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = interations.

-webkit-animation: test 1s 2s 3 alternate backwards

Combine transform and animation

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

Multiple animations

You can comma-separate the values to delcare multiple animations on a selector.

.animate-this {
   -webkit-animation:
      first-animation 2s infinite,
      another-animation 1s;
}