@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* ### EXAMPLE SETTING CODE ###  
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  animation-delay: -2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;}
	
  ### SAME ABOVE ANIMATION IN ONE LINE CODE ###
  animation: example 5s linear 2s infinite alternate;
*/

@keyframes bumping {
  0% {text-shadow: 0 0 0 yellow;}
  50% {text-shadow: 0 0 5px yellow;}
  100% {text-shadow: 0 0 0 yellow;}
}

@keyframes bumping_red_bg {
  0% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
  30% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
  70% {box-shadow: 0px 0px 7px 1px #ff3535, 0 0 10px 1px black inset;}
  90% {box-shadow: 0px 0px 0px 0px #ff3535, 0 0 10px 1px black inset;}
}

@keyframes bumping_green_bg {
  0% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
  30% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
  70% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
  90% {box-shadow: 0px 0px 5px 1px #41e920, 0 0 10px 1px black inset;}
  100% {box-shadow: 0px 0px 3px 1px #41e920, 0 0 10px 1px black inset;}
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}