how to animate a horizontal line going up and down?-CodePudding

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.

CodePudding user response：

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 ></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 ></div>
<br>