<div class="container">
	<div class="ui-icon-success">
		<span class="ui-icon-success__line ui-icon-success__line-tip"></span>
		<span class="ui-icon-success__line ui-icon-success__line-long"></span>
		<span class="ui-icon-success__placeholder"></span>
		<span class="ui-icon-success__fix"></span>
	</div>
	<button id="start1">显示动画</button>
	
	<div class="ui-icon-circle">
		<span class="ui-icon-circle__placeholder"></span>
		<span class="ui-icon-circle__half"></span>
	</div>
	<button id="start2">显示动画</button>
</div>
body,html{ 
	height: 100%; position: relative;
	background-color: #fff;
	// background-color: #454D82;
}
.container{
	display:flex;
	justify-content: center;
	align-items:center;
	padding: 40px;
}

// *,*:after,*:before{ box-sizing: border-box; }

.ui-icon-success{
	width: 80px;
	height: 80px;
	border: 4px solid #A5DC86;
	border-radius: 40px;
	border-radius: 50%;
	margin: 20px auto;
	padding: 0;
	position: relative;
	&__line{
		height: 5px;
    background-color: #A5DC86;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
		&-tip{
			width: 25px;
			left: 14px;
			top: 46px;
			transform: rotate(45deg);
		}
		&-long{
			width: 47px;
			right: 8px;
			top: 38px;
			transform: rotate(-45deg);
		}
	}
	&__placeholder{
		width: 80px;
    height: 80px;
    border: 4px solid rgba(165, 220, 134, 0.2);
    border-radius: 40px;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2;
	}
	&__fix{
		width: 5px;
    height: 90px;
    background-color: white;
    position: absolute;
    left: 28px;
    top: 8px;
    z-index: 1;
    transform: rotate(-45deg);
	}
	&:after,&:before{
		content: '';
		display: block;
		position: absolute;
    width: 60px;
    height: 120px;
    background: white;
	}
	&:after{
		border-radius: 0 120px 120px 0;
		top: -11px;
		left: 30px;
		transform: rotate(-45deg);
		transform-origin: 0px 60px;
	}
	&:before{
		border-radius: 120px 0 0 120px;
    top: -7px;
    left: -33px;
    transform: rotate(-45deg);
    transform-origin: 60px 60px;
	}
	
	&.active{
		&:after{
			 animation: rotatePlaceholder 4.25s ease-in;
		}
		.ui-icon-success__line-tip{
			animation: animateSuccessTip 0.75s;
		}
		.ui-icon-success__line-long{
			animation: animateSuccessLong 0.75s;
		}
		
	}
}

@keyframes rotatePlaceholder {
  0% { transform: rotate(-45deg); }
  5% { transform: rotate(-45deg); }
  12% { transform: rotate(-405deg); }
  100% { transform: rotate(-405deg); } 
}

@keyframes animateSuccessLong {
  0% { width: 0; right: 46px; top: 54px; }
  65% { width: 0; right: 46px; top: 54px; }
  84% { width: 55px; right: 0px; top: 35px; }
  100% { width: 47px; right: 8px; top: 38px; } 
}

@keyframes animateSuccessTip {
  0% { width: 0; left: 1px; top: 19px; } 
	54% { width: 0; left: 1px; top: 19px; }
  70% { width: 50px; left: -8px; top: 37px; }
  84% { width: 17px; left: 21px; top: 48px; }
  100% { width: 25px; left: 14px; top: 45px; } 
}

.ui-icon-circle{
	width: 80px;
	height: 80px;
	border: 4px solid #A5DC86;
	border-radius: 40px;
	border-radius: 50%;
	margin: 20px auto;
	padding: 0;
	position: relative;
	&__placeholder{
		width: 80px;
    height: 80px;
    border: 4px solid rgba(165, 220, 134, 0.2);
    border-radius: 40px;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 2;
	}
	&:after,&:before,&__half{
		content: '';
		display: block;
    position: absolute;
    width: 44px;
    height: 88px;
    background: white;
    top: -4px;
		bottom: -4px;
	}
	&__half{
		right: -4px;
		border-radius: 0 44px 44px 0;
		border: 4px solid #A5DC86;
		border-left: none;
		box-sizing: border-box;
	}
	&:after{
		right: -4px;
		border-radius: 0 44px 44px 0;
		transform-origin: left center;
	}
	&:before{
    left: -4px;
		border-radius: 44px 0 0 44px;
		transform-origin: right center;
	}
	&.active{
		&:after{
			animation: circle-right-rotate 1s linear both;
		}
		&:before{
			animation: circle-left-rotate .5s .5s linear both;
		}
	}
}

@keyframes circle-right-rotate {
	0% {transform:rotateZ(0); opacity: 1;}
  50% {transform:rotateZ(180deg); opacity: 1;}
	51%,100% { transform:rotateZ(180deg); opacity: 0;}
}
@keyframes circle-left-rotate {
	0% {transform:rotateZ(0);}
	100% { transform:rotateZ(180deg);}
}
View Compiled
$('#start1').on('click',function(){
	$('.ui-icon-success').removeClass('active');
	setTimeout(()=>$('.ui-icon-success').addClass('active'), 200)
})

$('#start2').on('click',function(){
	$('.ui-icon-circle').addClass('active');
	setTimeout(()=>$('.ui-icon-circle').removeClass('active'), 3000)
})
Rerun