Interaction Design Wiki ･ Web Development

CSS Animations

Find examples here.

Transitions

With transitions you can animate basic property changes easily:

.box {
  width: 100px;
  height: 100px;
  transform: none;
  transition: width 2s, height 2s, transform 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

When hovering over this box the browser will animate the transition of the defined values.

The transition property has the following syntax:

transition: <property> <duration> <timing-function> <delay>

The timing function can be one of the following:

linear | ease-in | ease-out | ease-in-out

Keyframes

With keyframes you can create more complex animations:

@keyframes sunrise {
  0% {
    bottom: 0;
    left: 340px;
    background: #f00;
  }
  33% {
    bottom: 340px;
    left: 340px;
    background: #ffd630;
  }
  66% {
    bottom: 340px;
    left: 40px;
    background: #ffd630;
  }
  100% {
    bottom: 0;
    left: 40px;
    background: #f00;
  }
}

.sunrise {
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
}

This animation can be triggered by adding the class sunrise to an element by using for example jQuery:

$('.element').addClass('sunrise');

The shorthand notion syntax is as follows:

animation: <name> <duration> <timing-function> <delay> <iteration-count>;