CSS Transitions

Activity

Here you can test out what you read, and achieve badges.

Activity Instructions

Read An Introduction to CSS Transitions before attempting this activity. Once you have read about transitions, do the following without deleting any HTML/CSS, and only adding in transition properties:

  • Make the color transition from red to blue on hover. Make this transition happen over 1 second.
  • Make the font-size and color transition on the hover. Make both of these transition over 1 second.
  • Make the border-radius transition on active. Make this transition happen over .5 seconds.

HTML

CSS

JavaScript

Output