WDD 231: Web Frontend Development I

CSS Animations and Transitions

Overview

The animation property in CSS enables developers to implement animations without the need for JavaScript. These animations are performance-efficient and are well-suited for creating subtle transitions between defined CSS style states over a specified duration.

The transition property in CSS allows for the smooth interpolation of style changes over a specified duration. By defining which properties should transition and the timing of the transition, developers can enhance user experience through subtle, visually appealing effects triggered by changes in an element's state.

Prepare

The CSS baseline properties to implement visual effects on web pages include:

• animation: A shorthand property for all the animation properties.

  

• @keyframes: A rule that defines the animation's phases.
• transition: A shorthand property for all the transition properties.
• transform: A property that allows you to apply 2D or 3D transformations to an element.

There are several advantages of using CSS for animations.

• Performance: Leverages the browsers's hardware accelerations creating smoother animations and better performance.
• Ease of Use: Relatively easy to implement.
• Flexibility: Used to create a wide variety of animations.
• Browser Compatibility: Well-supported and easily degrade on older browsers, hopefully not breaking the user experience.
• Accessibility: Provides visual clues and feedback to users.

Watch: Browser DevTools: Animation A demonstration of working with animations by Web Dev Simplified

Activity Instructions

Using CodePen or create a simple page to build each of the following CSS animations.

1. Use the animation shorthand, @keyframes, and transform to create the following "loading ..." animation:
   Check Your Understanding

   This code assumes that there is a div with an id of loader

   #loader {
     margin: 2rem;
     width: 50px;  /* width of the loader */
     height: 50px; /* height of the loader */
     border: 5px solid transparent; /* border width */
     border-color: #999 transparent #999 transparent; /* border colors (4 - 2 transparent) */
     border-radius: 50%; /* make it round */
     animation: spin 1.5s linear infinite; /* spin animation with duration and continuous */
     box-shadow: 0 0 1rem rgb(0 0 255 / 40%); /* blueish shadow effect on round div */
   }
   
   #loader::after {
     content: '⚙️';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: pulse 1.5s ease-in-out infinite;
   }
   
   @keyframes spin {
     100% {transform: rotate(360deg);} /* spin 360 degrees */
   }
   
   @keyframes pulse { /* pulse the gear emoji */
     0%, 100% {transform: translate(-50%, -50%) scale(1);} /* scale to 1 */
     50% {transform: translate(-50%, -50%) scale(1.25);} /* scale to 1.25 */
   }

2. Now use the transition property to create the following animation which activates when the user hovers over the image.
   Check Your Understanding

   This code assumes that there is a div with an id of loader-t

   .loader-t {
     /* the only thing that changed was using transition versus animation */
     transition: spin 1.5s linear infinite;
   }
           
   .loader-t::after {
     /* the only thing that changed was using transition versus animation and the size and visibility at start */
     transform: translate(-50%, -50%) scale(0);
     transition: transform 1.5s ease-in-out;
     font-size: 2rem;
    }
           
   .loader-t:hover {
     transform: rotate(360deg); /* Rotate on hover */
   }
           
   .loader-t:hover::after {
     transform: translate(-50%, -50%) scale(1.5); /* Scale on hover */
   }

   CSS transition cannot automatically loop like animation.

Test and Share

Test your updates and share your work with your peers on Microsoft Teams.