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

22 votes263 views2 answers
Disable user select css
CSS
0 vote237 views2 answers
Nth-child(2n+1)
CSS
0 vote256 views1 answer
How to add images on images css
CSS
17 votes246 views4 answers
Get featured image post wordpress by post id
CSS
0 vote238 views1 answer
Cd cover dimensions
CSS
0 vote241 views1 answer
Change height primeng progress spinner
CSS
8 votes235 views2 answers
Horizontal align icon css
CSS
0 vote247 views1 answer
WSGI: Truncated or oversized response headers received from daemon process
CSS
20 votes267 views3 answers
Text overflow ellipsis two lines
CSS
22 votes270 views2 answers
Css set styles for input text
CSS