teaching machines

CS 318 Lab 21 – Iframes and Transitions

April 19, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Today we explore transitions to add a little life to our webpages. We will focus on the mechanics of the CSS transitions. I leave it up to your good judgement to not go overboard or favor vanity over content. We’ll do a little example of making some list elements pop out when hovered over.

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;

The first lab exercise today has you doing some embedding of content from other sites. The second uses transitions to make a relaxing(?) flower garden.

Here’s your TODO list:

See you next time!



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


Create in embeds.html a web that embeds content from other sites.

Observe the following requirements:


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

Observe these requirements: