how to animate a horizontal line going up and down?

Issue

I’m making a scanner app and need to have a horizontal line that moves up and down continuously to indicate a scanning motion. How can I do this in CSS? If there are other methods, feel free to share too.

Solution

Codepen has tons of examples.

For instance this one: https://codepen.io/dicson/pen/eGZOYq

Or this one: https://codepen.io/branovaclav/pen/bpobbg

Code:

<div class="fingerprint scanning"></div>
<br>
.fingerprint {
  width: 58px;
  height: 58px;
  border: solid 3px #AAB8BE;
}

.fingerprint.scanning::after {
  content: '';
  position: absolute;
  width: 58px;
  height: 8px;
  background-image: linear-gradient(to bottom,
    rgba(170, 184, 190, 0),
    rgba(170, 184, 190, .8));
  animation: scanning .8s linear infinite;
}

@keyframes scanning {
    100% { transform: translate(0, 52px); }
}
.fingerprint {
  width: 58px;
  height: 58px;
  border: solid 3px #AAB8BE;
}

.fingerprint.scanning::after {
  content: '';
  position: absolute;
  width: 58px;
  height: 8px;
  background-image: linear-gradient(to bottom,
    rgba(170, 184, 190, 0),
    rgba(170, 184, 190, .8));
  animation: scanning .8s linear infinite;
}

@keyframes scanning {
    100% { transform: translate(0, 52px); }
}
<div class="fingerprint scanning"></div>
<br>

Answered By – Reinier68

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.