Assignment029j3a2b - 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;	
        			}
            }