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 is shorthand for 5 different properties:

1. transition-property describing which particular properties will be affected by the transition. You can use the word all to change all properties simultaneously.
2. transition-duration is how long this transition will take in either seconds or milliseconds: 3s or 650ms.
3. transition-timing function states how the transition will change over time. eg. ease-in-out.
4. transition-delay stated in seconds or milliseconds defines a delay before the transition starts after its trigger.
5. transition-behavior has only 2 values: normal, the default, and allow-discrete. This latter value is useful when making transitions from display: none. When set to normal the change to and from display: none will occur halfway through a transition, ie. at 50%. Using allow-discrete means the change from display: none at the beginning of a transition will occur at 0% and at 100% when transitioning to display: none.

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: one of the transform properties like translate, rotate etc. and opacity. Animating anything else can be costly in terms of browser rendering and you may not get a smooth 60fps transition. So 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 Transitions

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 using commas to separate each transition:

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

NB. 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; */
}