CSS Easing Cheat Sheet

[left-right]

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

linear

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

ease

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

ease-in

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

ease-out

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

ease-in-out

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

[left-right (alternate)]

linear

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

ease

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

ease-in

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

ease-out

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

ease-in-out

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

[blink]

@keyframes blink {
	from { opacity: 0 }
	to { opacity: 1 }
}

linear

.box { animation: blink 1s linear infinite; }

ease

.box { animation: blink 1s ease infinite; }

ease-in

.box { animation: blink 1s ease-in infinite; }

ease-out

.box { animation: blink 1s ease-out infinite; }

ease-in-out

.box { animation: blink 1s ease-in-out infinite; }

[blink (alternate)]

linear

.box { animation: blink 1s linear infinite alternate; }

ease

.box { animation: blink 1s ease infinite alternate; }

ease-in

.box { animation: blink 1s ease-in infinite alternate; }

ease-out

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

ease-in-out

.box { animation: blink 1s ease-in-out infinite alternate; }