Assignment: CSS Animation Techniques

Objective

The goal of this assignment is to demonstrate your understanding of CSS-only animations. You will use transition, transform, and @keyframes to build a simple tutorial page that showcases several common animation effects.

Instructions

You will create two files: index.html and LastName_style.css. Your page, when finished, should demonstrate the four effects listed below in separate sections. You should replicate the effects shown in the class tutorial sample.

Some Sample code with comments is available in Canvas Module or request by Canvas message. Your code should be just as clean and well-commented.

Required Effects (20 Points Total)

• (5 pts) Section 1: Navigation Bar Effect
  Create a horizontal navigation menu with at least 3 links. On hover, the links must have a smooth underline animation (e.g., animating width from 0% to 100%).
• (5 pts) Section 2: Button Effects
  Create a section with at least two buttons.
  • One button must "grow" (using transform: scale()) on hover.
  • The second button must have a looping "glow" or "pulse" effect (using @keyframes to animate box-shadow).
• (5 pts) Section 3: Text Animation
  Create a text element (like an <h3>) that animates on page load. This can be a "fade in" (animating opacity) or a "slide up" (animating transform: translateY()) effect using @keyframes.
• (5 pts) Section 4: CSS Sprite Animation
  Using the 7966228.jpg (rabbit sprite) file provided, create a CSS-only sprite animation. You must use a @keyframes rule to animate the background-position and use the steps() timing function to create the frame-by-frame effect.

Submission

Submit: PUBLISH online, your code. File naming should be as following.index.htm, LastName_style.css, and the image.jpg image file to this assignment portal.