AI gone wild

Introduction

Get ready to unleash your creativity in this electrifying exercise! Your mission, should you choose to accept it, is to breathe life into a robot face through the magic of animation. Picture this: blinking eyes, a playful wink, a grin that lights up the room! Utilize your newfound skills to make the robot face dance, spin, or express a range of emotions. With the power of animation, you'll turn a static image into a dynamic masterpiece. Get ready to embark on a thrilling journey of creativity and bring that robot face to life like never before! Let the animation extravaganza begin!

Please, make sure to watch the introductory video before you begin.

Learning objectives

This assignment should prove that a student is able to:

• Use the CSS transition rule to create simple animations and effects for the element's state changes.
• Use CSS keyframes to create complex and continuous animations.

Standard requirements

• Use the "Fancy Robot" exercise file from the "Position it right" approved assignment.
• All the tasks of the "Specific requirements" section MUST be solved
• The code of the index.html and styles.css should pass the W3C validation (Feel free to use either the "w3c web validator" VSCode extension or the "Online w3c Markup Validation Service")
• The code MUST be formatted with Prettier.
• Push the changes to the Github repo, when finished.
• Submit a .txt file with the Github repo url.

Specific requirements

Acceptance criteria:

• Animation with rotation is shown.
• Animation with disappearing/appearing is shown.
• Animation with changing dimensions is shown.
• Animation with movement around some position is shown.
• Animation on object hover event is shown.
• Animation with color changing is shown.
• Every facial feature item except for the face shape is animated.