A029j3a2b - Keyframes (Percentages)

CSS keyframes allow you animate elements. In the following examples, we specify animation names for the elements and provide a @keyframes code block (rule). These are slightly more complex animations that change from a beginning to end state using percentage code blocks.

Here's one example of element code and the binded animation.

#gold
{
	background-color: gold;
	animation-name:changemanycolors;
	animation-duration:1s;
	animation-iteration-count: 20;
	animation-timing-function: ease-in-out;
}
	
@keyframes changemanycolors
	{
		0%
			{
				background-color:gold;
			}
		25%
			{
				background-color:lime;
			}
		50%
			{
				background-color:mediumpurple;
			}
		75%
			{
				background-color:steelblue;
			}
		100%
			{
				background-color:yellow;	
			}
	}