Css animated cross mark

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 29;
  stroke-dashoffset: 29;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

Source: stackoverflow.com

Similar codes

1 vote298 views2 answers
How to middle fixed element
CSS
0 vote272 views1 answer
Truncate long line with dots
CSS
1 vote265 views1 answer
Style rule that expands the element to cover any floating content within the element
CSS
0 vote389 views1 answer
Ufw allow from subnet
CSS
8 votes292 views2 answers
Css list style
CSS
28 votes286 views3 answers
Text gradient css3
CSS
4 votes326 views4 answers
Composer rollback to v1
CSS
13 votes282 views4 answers
Cursor pointer events none
CSS
38 votes279 views3 answers
Use CSS to set the background color of the document (body) to yellow.
CSS
3 votes280 views2 answers
Image with background color css
CSS