Back to Week 8 page »

CSS Transitions

With CSS, you can ease changes in a style. This can be used for full fledged animations or something as simple as making a hover state less abrupt.

A more garish example

Shay Howe has an excellent writeup of using transitions and animations.

Transition Code Example

There are four transition properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

To make a box background change, we can use the hover state. The transition properties are applied to the original state.

.box {
  background: #cb60b8;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: .5s;
}
.box:hover {
  background: #582887;
}

Hover Craft!

.box {
  background: #cb60b8;
  transition: background 1s linear .5s;
}
.box:hover {
  background: #582887;
}

Back to Week 8 page »