CSS creates animations through @keyframes and the animation-name property. W3Schools has a page about using these animation functions: W3Schools site.

This is an example of how it can be used with multiple properties: @keyframes animation {
 0% {background-color: red; border-radius: 0;}
 50% {background-color: red; border-radius: 50%;}
 100% {background-color: red; border-radius: 0;}
}
.animate {
 animation-name: animation;
 animation-duration: 5s;
 animation-timing-function: linear; /*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)*/
 animation-iteration-count: infinite;
}

Below are some common ways to animate an element:

• - Transform: translate(n, n); /* n is how much to move it by */
• - Transform: scale(n, n); /* n is how much to scale it by */
• - Transform: rotate(ndeg); /* n is the degree amount to turn */
• - Transform: rotate(ndeg) scale(n, n) translate(n, n); /* Combines multiple transform effects */