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-duration:
• animation-iteration-count:
• animation-timing-function:
• animation-direction:

Here's one example of element code and the binded animation. In order to get credit for this assignment, you must also animate an image on your portfolio (index page).

        /* Animated elements */
        #black
        {
            background-color:black;
            animation-name:changecolor;
            animation-duration:4s;
        }
        @keyframes changecolor
        {
            From
            {
                background-color:black;
            }
            to 
            {
                background-color:red;
            }
        }