css animation counter

by ian_smithz

HTML

<div class="w-120 h-120 d-flex flex-align-items-centre flex-justify-content-centre">

  <div class="counter size-animation fade-animation move-animation"></div>

</div>

CSS

body{background-color: #195570}

.counter {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  position: relative;
}

.size-animation {
  animation: mysize 2s;
  animation-iteration-count: 2;
}

@keyframes mysize {
  from {
    width: 100px;
    height: 100px
  }
  to {
    width: 120px;
    height: 120px
  }
}

.move-animation {
  animation: mymove 2s;
  animation-iteration-count: 2;
}

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: 200px;
  }
}

.fade-animation {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}








/* utilities */



/* widths */

.w-100p {
  width: 100%
}

.w-50p {
  width: 50%
}

.w-120 {
  width: 120px
}

/* heights */

.h-120 {
  height: 120px
}




/* flex */
.d-flex {
  display: flex
}

.d-inline-flex {
  display: inline-flex
}

.flex-item {
  flex: 1
}

.flex-no-grow {
  flex-grow: 0
}

/* flex vertical alignment */

.flex-align-items-start {
  align-items: flex-start
}

.flex-align-items-centre,
.flex-align-items-center {
  align-items: center
}

.flex-align-items-end {
  align-items: flex-end
}

/* flex horizontal alignment */

.flex-justify-content-start {
  justify-content: flex-start
}

.flex-justify-content-centre,
.flex-justify-content-center {
  justify-content: center
}

.flex-justify-content-end {
  justify-content: flex-end
}

/* useful for stopping images being stretched by flex */

.flex-align-self-centre,
.flex-align-self-center {
  align-self: center
}

@media (min-width: 641px) {
  .flex-md-justify-content-start {
    justify-content: flex-start
  }
  .flex-md-justify-content-centre,
  .flex-md-justify-content-center {
    justify-content: center
  }
  .flex-md-justify-content-end {
    justify-content: flex-end
  }
}

@media (min-width: 1025px) {
  .flex-lg-justify-content-start {
   ...