Modify the given HTML file to produce an animation, resulting in the web page below.

Perform the following to the embedded stylesheet:

• Add a keyframe calledmoveFractionthat does the following:
  • At 0% sets the font color to yellow and usestransformproperty to translate to position (-355px, 60px) so the fraction is off the left side of the screen.
  • At 50% translates to (0px, 60px) so the fraction is just below and right of the question.
  • At 100% sets font color to red and translates to (0px, 0px) so the fraction is located next to the = sign.
• In the#answerrule start the moveFraction animation 1 second after the CSS loads, and make the animation duration 2 seconds.
• In the#answerrule useanimation-fill-mode: forwardsto keep the fraction from resetting back to the original location after the animation completes.
• Add atransitionproperty to the#questionrule to perform atransformover 0.6 seconds with theease-in-outtiming function.
• Add atransformproperty to the#question:hoverrule to scale by 0.9.

Verify that when the page loads, the 3/4 fraction moves from off the screen to the right, just under the question, then up next to the question. When the mouse hovers over the question, the text should shrink some until the mouse is moved off the text.

The code:

Question: ¼ + ½ =

¾

Whats goes on the solutions ?