Assignment029j3a2a - Keyframes (from and to)

CSS keyframes allow you to animate elements. In the following examples, we specify animation names for the elements and provide a @keyframes code block. These are simple animations that change from a beginning to end state using the from{} and to{} code blocks.

Here are additional properties to learn:

• animation-name:
• animation-delay:
• animation-duration:
• animation-iteration-count:
• animation-timing-function:
• animation-direction:
• animation-fill-mode:

Example:

    #teal
    {
        background-color:teal;
        animation-name:changecolor;
        animation-duration:4s;
    }
    
    @keyframes changecolor
    {
        from
        {
        background-color: pink;
        }
        to
        {
        background-color: purple;
        }
    }