CSS Transition Cheat Sheet

Syntax

transition: PROPERTY DURATION DELAY EASING
/*
	PROPERTY: CSS property
	DURATION: Time to execute keyframes (s or ms).
	DELAY: Time to delay start (s or ms).
	EASING: linear, ease, ease-in, ease-out, ease-in-out
*/

DURATION

.box {
	transition: 1s;
	&:hover {
		opacity: 0;
	}
}

DELAY

.box {
	transition: 1s .5s;
	&:hover {
		opacity: 0;
	}
}

EASING

.box {
	transition: 1s ease-in;
	&:hover {
		opacity: 0;
	}
}

PROPERTY

.box {
	transition: all 1s;
	&:hover {
		opacity: 0;
		background: white;
	}
}

.box {
	transition: opacity 1s;
	&:hover {
		opacity: 0;
		background: white;
	}
}

.box {
	transition: background 1s;
	&:hover {
		opacity: 0;
		background: white;
	}
}

.box {
	transition: background 1s, opacity 1s;
	&:hover {
		opacity: 0;
		background: white;
	}
}

.box {
	transition: background 1s, opacity 1s 1s;
	&:hover {
		opacity: 0;
		background: white;
	}
}