CSS keyframes allow you to animate elements, but as you noticed in the previous assignment, keyframes start on their own upon page load. In the following examples we control when keyframes start. We will start keyframe animations with something familiar - a hover pseudo class.
As in the previous assignment, we specify animation names for the elements and provide a @keyframes code block. However, we will do this on the :hover css code block. These are still simple animations that change from a beginning to end state using the from{} and to{} code blocks.
To earn credit for this assignment, your animations must be different than the animations below. The more complex the better. You can earn an A only if you animate images.
Here's one example of element code and the binded animation.
/* Animated elements */
#black
{
background-color: black;
}
#black:hover
{
/* Call the animation on hover */
animation-name:changecolor;
animation-duration:4s;
}
@keyframes changecolor
{
from
{
background-color: black;
}
to
{
background-color: red;
}
}