https://goo.gl/aS7HII

Table of Contents

  1. Objective
  2. Notes
  3. Exercise 1
  4. Exercise 2
  5. Exercise 3
  6. Exercise 4
  7. Exercise 5
  8. Exercise 6
  9. Exercise 7
  10. Exercise 8

Objective

Practice the basics of CSS transitions and Animations.

  • Apply CSS transitions
  • Control the animation easing function
  • Trigger transitions through pseudo-classes and through JavaScript
  • Define CSS animations
  • Listen to animation events

Notes

You can solve these exercises directly in Codepen or by downloading the provided files to your personal computer and editing and running them locally.

To solve an exercise directly in Codepen you should first register to make sure you can save your "Pens".

On each exercise, click on the "Edit on Codepen" on the top-right corner of the embedded example, than "fork" the Pen and edit at will.

To download, click on "Edit on Codepen", then click on "Export" at the bottom right corner of the window and select "Export .zip".

Exercise 1

Interative example of result for exercise 1.

Complete the CSS so that the small ball moves to the right when hit by the large ball. Use only CSS transitions.

See the Pen CSSTransitionsAnimations - 01 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 2

Example of result for exercise 2.

Complete the CSS and apply a CSS transition to the width of the <div> when the mouse cursor hovers over the rectangle.

See the Pen CSSTransitionsAnimations - 02 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 3

Example of result for exercise 3.

Complete the CSS by adding transitions to the width of the divs so that the transition on the blue div starts only when the transition of the red div ends.

See the Pen CSSTransitionsAnimations - 03 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 4

Example of result for exercise 4.

Apply transitions so that the squares open when the cursor hovers over the "main" div.

See the Pen CSSTransitionsAnimations - 04 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 5

Example of result for exercise 5.

Define a transition for the "left" property. Add JavaScript to move the box between positions left=0 and left=300px when you click on the box. (Can you make the box follow a square path as in the animated gif above?).

See the Pen CSSTransitionsAnimations - 05 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 6

Example of result for exercise 6.

Add animation to the CSS so that each of the 3 squares rotates with a different speed. The animation should only be active when the "loader" div has class "loading". For testing, the button toggles the loader class between "loading" and "".

See the Pen CSSTransitionsAnimations - 06 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 7

Example of result for exercise 7.

Add a script to the previous exercise so that the color of each square changes after each loop. The color should be chosen randomly (use the provided function, and existing code).

See the Pen CSSTransitionsAnimations - 07 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Exercise 8

Example of result for exercise 8.

Add a script to the previous exercise so that the color of each square changes after each loop. The color should be chosen randomly (use the provided function, and existing code).

See the Pen CSSTransitionsAnimations - 08 - Exercise by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.


5,088 0 23