chromium/ash/webui/common/resources/sea_pen/sea_pen_chip_text_element.html

<style>
  .letter {
    display: inline-block;
    opacity: 0;
    position: relative;
    white-space: pre;
  }

  @keyframes letter-out-animation {
    0% {
      opacity: 1;
    }
    60% {
      transform: translateY(2px);
      animation-timing-function: cubic-bezier(0.05, 0.70, 0.10, 1.00);
      opacity: 1;
    }
    100% {
      transform: translateY(-4x);
      opacity: 0;
    }
  }

  @keyframes letter-in-animation {
    from { transform: translateY(7px); }
  }

  @keyframes letter-in-fade-animation {
    from { opacity: 0; }
  }

  .letter.out {
    animation: letter-out-animation 350ms cubic-bezier(0.00, 0.00, 0.00, 1.00) 1;
  }

  .letter.in {
    opacity: 1;
    animation: letter-in-animation 250ms cubic-bezier(0.05, 0.70, 0.10, 1.00) 1,
                letter-in-fade-animation 250ms linear 1;
  }

  #underline {
    border-bottom: 2px dotted;
    grid-area: chip;
    /* Add one pixel to move the underline below the border. */
    height: calc(100% + 1px);
    justify-self: center;
    width: 100%;
    z-index: -1;
  }
</style>
<div>
  <div id="chipText" aria-hidden="true">[[chipText]]</div>
  <div id="underline"></div>
</div>