<div id="animationWindow">
	<div class="number">29</div>
	<div id="anim4">
		
		<svg>
			<circle class="c1"  cx="50" cy="50" r="40" stroke="white" />

			<circle class="c2" cx="50" cy="50" r="40" stroke="white" />

			<circle class="c3" cx="50" cy="50" r="40" stroke="white" />
			
			<circle class="c1"  cx="50" cy="50" r="40" stroke="white" />
		</svg>
		
	</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');





body 
 background-color: #111
 overflow: hidden
 text-align: center
 display: flex
 justify-content: center
 align-items: center



body
html 
 height 100%
 width 100%
 margin 0
 padding 0



#animationWindow 
	width  100px
	height  100px 
	display inline-flex
	position relative
	transform scale(4)
	margin-top 0px

	.number
		color white
		position absolute
		font-size 4rem
		left 0
		right 0px
		top 0
		bottom 0
		margin auto
		vertical-align middle
		height auto
		width auto
		margin-top 10px
		font-family 'Oswald', sans-serif
		text-shadow #404040 0px 0px 11px
		
	#anim4
		display flex
		flex 1
		svg
			width: 100px
			height: 100px
			
			circle
				animation circleAnim1 1.5s infinite
				
				&.c1
					fill red
					// animation circleAnim1 1s infinite
					animation-delay 0s
					transform-origin center center 0px
					transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.9s
					-webkit-transform-origin center center 0px
					-webkit-transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.9s
					
				&.c2
					fill red
					// animation circleAnim1 1s infinite
					animation-delay 0.6s
					transform-origin center center 0px
					transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.3s
					-webkit-transform-origin center center 0px
					-webkit-transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.3s
					
				&.c3
					fill red
					// animation circleAnim1 1s infinite
					animation-delay 1s
					transform-origin center center 0px
					transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.3s
					-webkit-transform-origin center center 0px
					-webkit-transition all 0.2s cubic-bezier(0.895,0.030,0.685,0.220) 0.3s
		
@keyframes circleAnim1 {
  from {
		-webkit-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1); /* older webkit */
		-webkit-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-moz-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-o-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005); /* custom */

		-webkit-transition-timing-function cubic-bezier(0.885, 0.000, 0.220, 1) /* older webkit */
		-webkit-transition-timing-function cubic-bezier(0.885, 0.000, 0.220, 1.005)
		-moz-transition-timing-function cubic-bezier(0.885, 0.000, 0.220, 1.005)
		-o-transition-timing-function cubic-bezier(0.885, 0.000, 0.220, 1.005)
		transition-timing-function cubic-bezier(0.885, 0.000, 0.220, 1.005) /* custom */
		opacity 0
		stroke-width 60
		transform matrix3d(0.1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1)
		-webkit-transform matrix3d(0.1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1)
		fill blue
  }

  to {
		// transform scaleZ(1)
		-webkit-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1); /* older webkit */
		-webkit-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-moz-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-o-transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005);
		transition: all 500ms cubic-bezier(0.885, 0.000, 0.220, 1.005); /* custom */

		-webkit-transition-timing-function: cubic-bezier(0.885, 0.000, 0.220, 1); /* older webkit */
		-webkit-transition-timing-function: cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-moz-transition-timing-function: cubic-bezier(0.885, 0.000, 0.220, 1.005);
		-o-transition-timing-function: cubic-bezier(0.885, 0.000, 0.220, 1.005);
		transition-timing-function: cubic-bezier(0.885, 0.000, 0.220, 1.005); /* custom */
		opacity 1
		stroke-width 0
		transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
		-webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);

  }
}

@keyframes circleAnim2 {
  from {
		// transform scaleZ(10)
		transition all ease 0.3s
		stroke-width 60
		opacity 0
		transform: matrix3d(0.1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1)
		-webkit-transform: matrix3d(0.1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1)

		fill blue
  }

  to {
		// transform scaleZ(1)
		transition all ease 0.3s
		stroke-width 0
		opacity 1
		transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1)
		-webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1)

  }
}
View Compiled
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.