Transitions

Any CSS property that can be defined in numbers and can thus have intermediate numbers is animatable.

Unlike @keyrame animations that can be triggered by page loads transitions are triggered by an event such as a hover.

The transition property has four values:

• property describing which particular properties will be affected by the transition. You can use the word all to change all properties simultaneously.
• duration is how long this transition will take in either seconds or milliseconds: 3s or 650ms.
• timing function states how the transition will change over time. eg. ease-in-out.
• delay stated in seconds or milliseconds defines a delay before the transition starts after its trigger.

The shortcut for all these properties combined is transition.

Using transition: 0.5s will transform anything that changes between two states.

The most popular properties to animate are: transform and opacity. Animating anything else can be costly in terms of browser rendering and you may not get a smooth 60fps transition. Using transform properties is a natural choice.

Where to place the transition property

It’s usual to place the transition in the default state declaration. That way it works both ways, eg. on hover and when returning to hoverless.

a {
    color: blue;
    transition: 0.4s;
}
a:hover {
    color: red;
}

However if you want different timings for hover over and hover out then place the transition statement in the :hover declaration for hover over and the return statement for hover out in the initial declaration.

Multiple Transitons

If you want to use multiple transitions with different timings you can do it like this:

a:hover {
    transition-property: background, border;
    transition-duration: .5s, 2s;
}

But a more concise method is:

a {
transition: background-color 0.5s ease-in 0.2s, color 0.1s 0.5s;
}

NB.

1. A comma is used to separate groups of values.
2. The second time in seconds or milliseconds is for animation-delay.

/* --- COMING SOON --- */

.resources > ul > li:nth-child(2) {
  padding-bottom: .7em;
  /* border-bottom: solid 1px; */
}