Text Animation

Code Example

 <style>
  .container {
   align-items: center;
   background-color: #3EB2FD;
   background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
   border-radius: 40px;
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
   display: flex;
   height: 80px;
   justify-content: center;
   position: relative;
   width: 200px;
   margin: 20px auto;}

  .text {
   color: white;
   position: absolute;
   transition: opacity 300ms;
   user-select: none;
   -moz-user-select: none;}

  .fingerprint {
   /* height: 80px; */
   left: -8px;
   opacity: 0;
   position: absolute;
   stroke: #504e4e;
   top: -9px;
   transition: opacity 1ms;}

  .fingerprint-active {
   stroke: #fff;}

  .fingerprint-out {
   opacity: 1;}

  .odd {
   stroke-dasharray: 0px 50px;
   stroke-dashoffset: 1px;
   transition: stroke-dasharray 1ms;}

  .even {
   stroke-dasharray: 50px 50px;
   stroke-dashoffset: -41px;
   transition: stroke-dashoffset 1ms;}

  .ok {
   opacity: 0;}

  .active.container {
   animation: 6s Container;}

  .active .text {
   opacity: 0;
   animation: 6s Text forwards;}

  .active .fingerprint {
   opacity: 1;
   transition: opacity 300ms 200ms;}

  .active .fingerprint-base .odd {
   stroke-dasharray: 50px 50px;
   transition: stroke-dasharray 800ms 100ms;}

  .active .fingerprint-base .even {
   stroke-dashoffset: 0px;
   transition: stroke-dashoffset 800ms;}

  .active .fingerprint-active .odd {
   stroke-dasharray: 50px 50px;
   transition: stroke-dasharray 2000ms 1500ms;}

  .active .fingerprint-active .even {
   stroke-dashoffset: 0px;
   transition: stroke-dashoffset 2000ms 1300ms;}

  .active .fingerprint-out {
   opacity: 0;
   transition: opacity 300ms 4100ms;}

  .active .ok {
   opacity: 1;
   animation: 6s Ok forwards;}

  @keyframes Container {
   0% { width: 200px }
   6% { width: 80px }
   71% { transform: scale(1); }
   75% { transform: scale(1.2); }
   77% { transform: scale(1); }
   94% { width: 80px }
   100% { width: 200px }}

  @keyframes Text {
   0% { opacity: 1; transform: scale(1); }
   6% { opacity: 0; transform: scale(0.5); }
   94% { opacity: 0; transform: scale(0.5); }
   100% { opacity: 1; transform: scale(1); }}

  @keyframes Ok {
   0% { opacity: 0 }
   70% { opacity: 0; transform: scale(0); }
   75% { opacity: 1; transform: scale(1.1); }
   77% { opacity: 1; transform: scale(1); }
   92% { opacity: 1; transform: scale(1); }
   96% { opacity: 0; transform: scale(0.5); }
   100% { opacity: 0 }}
 </style>




  <script>
   const container = document.querySelector('.container')
   container.addEventListener('animationend', () => {
   container.classList.remove('active');
   });
  </script>