CSS Transitions.

Transitions

CSS Transitions allow you to smoothly change the properties of an element in a certain amount of time. You can link this to things such as hover and clicks demonstrated by this button below. *click!*

We will go over the basics of CSS Transitions and their properties:

transition-property ~ Defining what properties to animate.
transition-duration ~ How long the transition takes.
transition-timing-function ~ How the transition should speed up or slow down.
transition-delay ~ Delay before the transition runs after activation.
transition ~ Shorthand for transitions.

If you want to apply a transition to your element there are plenty of different aspects that you can use including; color (text), background-color, width and height, opacity, position (margins or via top/left/right/bottom), transform (rotation, scale, etc.) and nearly anything else that can be set to a range of values.

The main types of ways to activate transitions are with :hover, :active, :focus and :target.

Properties & Durations

Durations are how long the animation takes to complete. To specify the duration of the animation, use transition-duration. Durations are specified in (x)s where x is the amount of time in seconds. If you want only a certain property to have a different animation time you can use all.
For example, transition-duration: all 3s, background-color 1s; means that every transition takes 3 seconds except the background, which will change much faster.

One

Two

With these two boxes, I added animation durations but the 2nd box has separate durations for each transformation it does.

#box1 {
	transition-property: all;
	transition-duration: 1s; /* No selector applies duration to 'all' */
}  

#box1:hover {
	background-color: blue;
	border-radius: 40px;
}

#box2 {
	transition-property: border-radius, background-color;
	transition-duration: 0.5s, 3s;
}

#box2:hover {
	background-color: red;
	border-radius: 40px;
}

Speeds

Speeds are the animation speed curves or known as the timing function. Speed curves define how the transition should speed up and slow down throughout. The transition-timing-function property specifies this.

Linear

Ease

Ease-in

Ease-out

Ease-in-out

linear ~ Same speed from start to end.
ease ~ Short slow start then fast then a gradual slow end (default).
ease-in ~ Slow start and constant speed afterwards.
ease-out ~ Constant speed with a slow end.
ease-in-out ~ Slow start with fast middle and a slow end.
cubic-bezier(x, x, x, x) ~ Cubic bezier speed curve.

This code below shows the different timing functions of the boxes above. Note, cubic-bezier is not shown as it can be any custom-defined speed model.

#box1 {
	transition: 1s;
	transition-timing-function: linear;
}

#box2 {
	transition: 1s;
	transition-timing-function: ease;
}

#box3 {
	transition: 1s;
	transition-timing-function: ease-in;
}

#box4 {
	transition: 1s;
	transition-timing-function: ease-out;
}

#box5 {
	transition: 1s;
	transition-timing-function: ease-in-out;
}

#box1:hover, #box2:hover, #box3:hover, #box4:hover, #box5:hover {
	background-color: pink;
	border-radius: 30px;
	transform: rotateZ(180deg);
}

Delays

Delays allows all activating actions such as clicking and hovering to wait for a certain amount of time before transitioning. To add a delay to any transition use transition-delay.

1 Sec

Here is the delay specifying part of the code used in the box above. You can hover and click on the box, although to click, you must hold the button down for the delayed amount of time to activate.

#box1 {
	transition: 1.5s;
	transition-delay: 1s;
}

#box1:hover {
	background-color: blue;
	border-radius: 40px;
	padding-left: 30%;
	padding-right: 30%;
}

#box1:active {
	background-color: orange;
	transform: scale(0.95);
}

Shorthands

Once you have learnt the basics, here is a shorthand to take up less code and space!

box {
	transition-property: background-color;
  	transition-duration: 2s;
  	transition-timing-function: ease-in-out;
  	transition-delay: 0.5s;
}

This code above can be shortened into one line by using the transition shorthand. The :hover or code that creates the transition effect cannot be shortened so it is not shown here. You can leave out properties and the shorthand will work as long as the remaining ones are still in order. e.g. duration must always go before the delay.

/* transition: transition-property duration speed-curve delay; */

box {
	transition: background-color 2s ease-in-out 0.5s;
}


/* To have different timings for each property of the element, simply repeat properties above with a comma. */

example {
	transition: background-color 2s linear, border-radius 1s ease 0.5s;
}