Versions Compared

Version Old Version 1 New Version 2
Changes made by

Joël Gähwiler

Joël Gähwiler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

With transitions you can animate basic property changes easily:

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

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

...

The transition property has the following syntax:

Code Block
languagecss
transition: <property> <duration> <timing-function> <delay>


The timing function can be one of the following:

Code Block
languagecss
linear | ease-in | ease-out | ease-in-out

...

With keyframes you can create more complex animations:

Code Block
languagecss
@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:

Code Block
languagejs
$('.element').addClass('sunrise');

The shorthand notion syntax is as follows:

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