Intro to CSS animations: a tutorial for dynamic web designs

001-linear-rotation.css

.core-cloud {
	/* ...CSS styles for this element */

	animation: 2s linear infinite rotate-core;
}

@keyframes rotate-core {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

002-cubic-bezier.css

animation: 3s cubic-bezier(.44,.28,.33,.95) infinite rotate-core;

003-color-shift.css

@keyframes color-shift {
	from {
		filter: hue-rotate(0deg);
	}
	to {
		filter: hue-rotate(80deg);
	}
}

004-prefers-reduced-motion.css

@media (prefers-reduced-motion: no-preference) {
	/* Add your animation code here */
}