Pseudo Judo Exercise

Introduction

This ninja is highly trained assassin, who normally moves to fast to see. Use your CSS kung fu skills to animate the ninjas actions.

Objective

Use pseudo classes, the transition and the transform properties to animate the ninja actions.

Requirements

Complete the following tasks below, by adding the appropriate CSS. You do not need to add or change any HTML or JavaScript.

  1. Go to the Pseudo Judo exercise found on CodePen. Log into CodePen and click the Fork button.
  2. When mousing over the ninja, make him quickly fade out to near invisibility.
  3. When mousing out the ninja, make him slowly return to normal visibility.
  4. When clicking on the ninja, make him quickly jump and remain in the air.
  5. When releasing the mouse, make him hover in air for a second and then slowly return to the ground.
  6. When clicking the spin button, make the ninja spin on the vertical (y) axis.
  7. When clicking the flip button, make the ninja spin on the horizontal (x) axis.
  8. When clicking the grow button, make the ninja grow to twice his normal size.
  9. When clicking the shrink button, make the ninja shrink to half his normal size.
  10. When clicking the special button, make the ninja do his "special" move. You decide what that is.

Examples

Mouse over / Mouse out

Animated Gif demonstrating the action the ninja does when mouse over and off.

Click / Release

Animated Gif demonstrating the action the ninja does when clicking and releasing.

Spin

Animated Gif demonstrating the action the ninja does when clicking the spin button.

Flip

Animated Gif demonstrating the action the ninja does when clicking the flip button.

Grow

Animated Gif demonstrating the action the ninja does when clicking the grow button.

Shrink

Animated Gif demonstrating the action the ninja does when clicking the shrink button.