Untitled Document

Advanced Delays

Normal

Example 1

Example 2

Hover on me

The Example 1 green circle has this CSS instead:


#dd_main2 {
  transition-property: top, left;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
}

While the Example 2 red circle has this CSS instead:


#dd_main2 {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

You can set the way different properties animate differently. In this example the normal (blue) circle has this CSS (with the appropriate vendor prefixes):


#dd_main2 {
  transition: all 1s ease-in-out;
}

This allows us to animate the properties independently of each other, meaning that this simple technique can be used to create very complex animations.