CSS Animation Cheat Sheet

Syntax

animation: KEYFRAME DURATION DELAY EASING ITERATION DIRECTION FILL_MODE
/*
	KEYFRAME: Keyframes name.
	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
	ITERATION: Number of executions (Integer, Decimal or infinite) .
	DIRECTION: alternate, reverse, alternate-reverse.
	FILL_MODE: State before and after animation(none, forwards, backwards).
	STATE: paused or running
*/

@keyframes left-right

@keyframes left-right {
	from { left: 0 }
	to { left: 100% }
}

DURATION

.box { animation: left-right 1s; }

DELAY

.box { animation: left-right 1s .5s; }

ITERATION

.box { animation: left-right 1s 3; }

.box { animation: left-right 1s 1.5; }

.box { animation: left-right 1s infinite; }

EASING

.box { animation: left-right 1s infinite linear; }

DIRECTION

.box { animation: left-right 1s infinite alternate; }

.box { animation: left-right 1s infinite reverse; }

.box { animation: left-right 1s infinite alternate-reverse; }

FILL_MODE

.box { animation: left-right 1s 1.3 none; }

.box { animation: left-right 1s 1.3 forwards; }

.box { animation: left-right 1s 1.3 backwards; }

.box { animation: left-right 1s 1.3 both; }

Order is irrelevant

.box { animation: left-right 1s 1s ease-out infinite alternate; }

.box { animation: left-right ease-out infinite 1s 1s alternate; }

.box { animation: left-right alternate infinite ease-out 1s 1s; }