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