CODEWITHSUNDEEP
csscss-transitions
DasBeasto
DasBeasto

Reputation: 2282

CSS circle Spin/Grow transition, text starting outside

I have a circle that I want to grow both width and height and spin to face upright. The problem is you can see the embedded checkmark starts outside of the circle and spirals inwards as opposed to growing with the 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: all 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 would like to keep the checkmark centered inside the circle as it grows.

Upvotes: 0

Views: 284

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16069

I'm not sure if I got your question correctly, but if you want to hide the checkmark outside of the green circle you can add the css property overflow: hidden;.

EDIT: According to the author's comment, I added a new solution.

If you want to position the checkmark sign inside the circle and nevertheless transform it together with the circle, it is best to add another element (or pseudoelement) for the checkmark sign and only assign the transformation to the circle. Here is an example of the transformation with a pseudoelement.

$(function() {
    $("span").addClass("active");
});
/* <div> is only for layouting (centering into the middle) */
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

span {
    display: block;
    position: relative; /* needs to be set, that the checkmark is positioned relative to the <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: all 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>

Upvotes: 2

Related Questions