CSS Blink Animation

by Jens Kühn

HTML

<pre class="copyPaste">
  <code>
<span class="copyPaste__single-dollar">&gt;</span><span class="copyPaste__paste-me">npm install -g @sanity/cli &amp;&amp; sanity init</span><span class="copyPaste__blinking-cursor">|</span>
</code>
  </pre>

CSS

.copyPaste {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  padding: 1em 1.4em;
  line-height: 1.3em;
  text-align: center;
  font-family: monospace;
  white-space: normal;
  margin-bottom: 1em;
  margin-top: 1em;
  border-radius: 2px;
    font-size: 1.2em;
    display: inline-block;
}

.copyPaste__blinking-cursor {
  animation: 1s blink step-end infinite;
  user-select: none;
}

.copyPaste__paste-me {
  padding: 0 0.5em 0 1em;
}

.copyPaste__single-dollar {
  user-select: none;
}

@keyframes blink {
    0%,to {
        color: transparent
    }

    50% {
        color: #fff
    }
}