How to make a similar effect on the site or what is the name of such an effect?

Question

css

How to make an effect like in this picture (Where the line is formed)?
Or what is this effect called?
(Gif from an article on Habré)

Answer 1

A line is just a block with dimensions and a black background.
To achieve this effect, it is enough to use the properties
position: absolute; left:N; top: N; - to remove it from the screen
transform: rotate(45deg); - to rotate it to the desired angle (45 degrees in this case)
transition: 2s width; - to animate the change in width
And after loading the page, run a js script that will set a new width of the line, such that it crawls out of the screen border

window.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}

Using this, it will be quite easy to complicate the animation the way you want.

Answer 2

Not exactly the same, but still https://github.com/michalsnik/aos