CSS Transitions Cheatsheet

Properties:


   span {
      transition-property: color; 
      transition-duration: .5s;
      transition-delay: 1s;
      transition-timing-function: ease;
   }

→ Check out which CSS properties you can apply transitions to here ←


Shorthand:


   span {
      transition: color .5s 1s ease;
   }

Apply Transitions to Multiple Properties:


   span {
      transition: color .5s ease-in, background .2s linear;
   }

Apply Transitions to All Properties:


   span {
      transition: all .5s;
   }

Applying Transitions to Pseudo States:

When you apply a transition to a pseudo state (ex:hover), it only works when that state is in action. Apply transitions to pseudo states if you want them to differ (for example on hover / after hover).

Check out the difference on hover:

Button with Transition

Button with Transition on Hover