CSS circle Spin/Grow transition, text starting outside -

i have circle want grow both width , height , spin face upright. problem can see embedded checkmark starts outside of circle , spirals inwards opposed growing circle.

$(function() {  	$("span").addclass("active");  })

span {  	position: absolute;  	display:block;  	color: red;  	font-size: 0px;  	font-weight: bold;  	width: 0px;  	height: 0px;  	top: 50%;  	left: 50%;  	transform:  translatey(-50%) translatex(-50%);  	line-height:80px;  	text-align: center;  	background: rgba(32,167,110,0.9);  	border: 2px solid rgb(32,167,110);  	border-radius: 50%;  	-webkit-transform: rotatez(-360deg);  	-ms-transform: rotatez(-360deg);  	transform: rotatez(-360sdeg);  	transition: 5s;  	margin-left: -20px;  	margin-top:-34px;  }    span.active {  	-webkit-transform: rotatez(0deg);  	-ms-transform: rotatez(0deg);  	transform: rotatez(0sdeg);  	width: 80px;  	height: 80px;  	font-size: 45px;  	margin-left: -40px;  	margin-top:-68px;  }

<span>✓</span>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

i keep checkmark centered inside circle grows.

i'm not sure if got question correctly, if want hide checkmark outside of green circle can add css property overflow: hidden;.

edit: according author's comment, added new solution.

if want position checkmark sign inside circle , nevertheless transform circle, best add element (or pseudoelement) checkmark sign , assign transformation circle. here example of transformation pseudoelement.

$(function() {      $("span").addclass("active");  });

/* <div> layouting (centering middle) */  div {      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);  }    span {      display: block;      position: relative; /* needs set, checkmark positioned relative <span> */      color: red;      font-size: 0;      font-weight: bold;      width: 0;      height: 0;      text-align: center;      background: rgba(32,167,110,0.9);      border: 2px solid rgb(32,167,110);      border-radius: 50%;      -webkit-transform: rotate(-360deg);      -ms-transform: rotate(-360deg);      transform: rotate(-360deg);      transition: 5s;  }    span:after {      content: "✓";      position: absolute;      transform: translate(-50%, -50%);      top: 50%;      left: 50%;  }    span.active {      -webkit-transform: rotate(0deg);      -ms-transform: rotate(0deg);      transform: rotate(0deg);      width: 80px;      height: 80px;      font-size: 45px;  }

<div>      <span></span>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>