teaching machines

CS 318: Lab 20 – Animations

April 16, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we explore transitions to add a little life to our webpages using CSS transitions. As an example, we’ll create a list whose items pop out when hovered.

We start with a list:


Let’s add some background color to each item:

li {
  background-color: blue;
  color: white;

Let’s remove the bullets, shrink the size a bit, and decrease the padding:

ul {
  list-style: none;
  width: 200px;
  padding-left: 0;

Let’s space things out a bit:

li {
  /* ... */
  margin: 10px auto;
  padding: 20px;

Now let’s accentuate hovered list items:

li:hover {
  background-color: purple;
  transform: translate(20px, 0);

This is where transitions come in. In their absence, we move from hovered to non-hovered styles instantaneously. We want to smoothly traverse between the two states. We need to specify a few CSS properties to enable that blending:

Let’s make the list items transition between their left and background-color properties over half a second. We’ll start and end the transition slowly:

li {
  /* ... */
  transition-property: transform, background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;

We can also express this in shorthand notation:

li {
  /* ... */
  transition: transform 500ms ease-in-out, background-color 500ms ease-in-out;

Here’s your TODO list:

See you next time!



Our goal today is to add some life to our web pages by adding in some animations via CSS transitions. We’ll animate a hand of playing cards and a flower garden.

First create a lab20 directory. Add a partners.html and include your first names and last initials.


Your first challenge is to create a selectable hand of cards interface that behaves as follows:

Follow these steps to produce your interface:


Create in flowers.html and flowers.css an interactive floral arrangement that uses CSS transforms and transitions to ensnare the viewer in a state of blissful bee-ness:

Observe these requirements:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab20 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.