Animations

Task #6

Description:

Summing-up knowledge (animation, transition, transform).

  • - .wave - waves must animate position from left to the right (infinite), change direction;
  • - .boat - the boat must emulate up/down motion and move from left to the center;
  • - .sun - the sun must rotate;
  • - .cloud -the cloud - must move from right to left and cover the sun after that background on (.animation-box) must be changed from transparent to #262F37;.
  • - .move-boat:after - this is the smoke. Must change translate and opacity;
  • - animation must be started after user hover the (.animation-box)

Please take a look for image - direction and gif example.

Example animations:

Your Solution