#element {

  width: 80px;

  height: 30px;

  background-color: blue;

  color: white;

  transition: width 2s, background-color 1s;

  transition-delay: 2s;

}

​

#element:active {

  width: 200px;

  background-color: red;

}

/* Answer to: "css animation delay" */

​

/*

  The animation-delay property specifies a delay for the start of an animation.

*/

​

div {

  animation-delay: 2s;

}

#delay {

  font-size: 14px;

  transition-property: font-size;

  transition-duration: 4s;

  transition-delay: 2s;

}

​

#delay:hover {

  font-size: 36px;

}

/* These transition properties apply on "mouseout" */

#bar { transition:height .5s ease-out 1s; } 

​

/* These transition properties apply on hover */

#bar:hover { transition:height .5s ease-out 0s; }

/* Define the CSS animation */

@keyframes example {

  0% { opacity: 0; }

  50% { opacity: 1; }

  100% { opacity: 0; }

}

​

/* Apply the animation to an element */

.element {

  animation-name: example;

  animation-duration: 4s;

  animation-delay: 2s; /* Add a delay of 2 seconds */

  animation-iteration-count: infinite;

}

div {

  animation-delay: 8s;

}

#box {

  width: 100px;

  height: 100px;

  background-color: #4b65b5;

  transition: width 1s, height 1s, 

  background-color 1s;

}

​

#box:active {

  width: 150px;

  height: 150px;

  background-color: #DC143C;

}