How to scale/size a css animation?

Question

Not really aware how to use CSS animations, but I found something that works perfectly for my site. The one issue, is it's way too small. Anyone have any advice for what I would need to tinker with to expand the size? I actually see where to increase the size/scale towards the end of the animation, which is made obvious with the scale attributes. What I don't know, is controlling the size before the animation causes it to expand. Thank you very much. -Wilson

Ex: http://www.wilsonschlamme.com/animationtest.html

css:

.overlay-loader .loader-icon {
  position: absolute;
  top: 50%;
  left: 44%;
  color: #42f498;
}

.overlay-loader .loader-icon.spinning-cog {
  -webkit-animation: spinning-cog 1.3s infinite ease;
  -moz-animation: spinning-cog 1.3s infinite ease;
  -ms-animation: spinning-cog 1.3s infinite ease;
  -o-animation: spinning-cog 1.3s infinite ease;
  animation: spinning-cog 1.3s infinite ease;
  background-color: #42f498;
}

@-webkit-keyframes spinning-cog {
  0% { -webkit-transform: rotate(0deg) }
  20% { -webkit-transform: rotate(-45deg) }
  100% { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes spinning-cog {
  0% { -moz-transform: rotate(0deg) }
  20% { -moz-transform: rotate(-45deg) }
  100% { -moz-transform: rotate(360deg) }
}

@-o-keyframes spinning-cog {
  0% { -o-transform: rotate(0deg) }
  20% { -o-transform: rotate(-45deg) }
  100% { -o-transform: rotate(360deg) }
}

@keyframes spinning-cog {
  0% { transform: rotate(0deg) }
  20% { transform: rotate(-45deg) }
  100% { transform: rotate(360deg) }
}

@-webkit-keyframes shrinking-cog {
  0% { -webkit-transform: scale(2) }
  20% { -webkit-transform: scale(2.2) }
  100% { -webkit-transform: scale(1) }
}

@-moz-keyframes shrinking-cog {
  0% { -moz-transform: scale(2) }
  20% { -moz-transform: scale(2.2) }
  100% { -moz-transform: scale(1) }
}

@-o-keyframes shrinking-cog {
  0% { -o-transform: scale(2) }
  20% { -o-transform: scale(2.2) }
  100% { -o-transform: scale(1) }
}

@keyframes shrinking-cog {
  0% { transform: scale(2) }
  20% { transform: scale(2.2) }
  100% { transform: scale(0) }
}

.overlay-loader .loader-icon.shrinking-cog {
  -webkit-animation: shrinking-cog .3s 1 ease forwards;
  -moz-animation: shrinking-cog .3s 1 ease forwards;
  -ms-animation: shrinking-cog .3s 1 ease forwards;
  -o-animation: shrinking-cog .3s 1 ease forwards;
  animation: shrinking-cog .3s 1 ease forwards;
  background-color: #42f498;
}

Answer 1

If you want it to be big from the start of the animation, add scale to spinning-cog animation. do this to all prefixes (change x to what scale you want)

@keyframes spinning-cog {
  0% { transform: rotate(0deg) scale(x)}
  20% { transform: rotate(-45deg) scale(x)}
  100% { transform: rotate(360deg) scale(x)}
}