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.

Example:

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