@keyframe: Spin and Scale

by Matthew Schenker

HTML

<div class="container">
</div>

CSS

.container {
  margin: 200px;
  width: 1px;
  height: 1px;
  background: blue;
  animation-name: grow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes grow {
  0% {
    transform: scale(0) rotate(0deg);
  }

  50% {
    transform: scale(350) rotate(180deg);
  }

  100% {
    transform: scale(0) rotate(-359deg);
  }
}