Как анимировать пунктирную стрелку?

Как следует из названия, я пытаюсь анимировать пунктирную стрелку. Я хочу, чтобы это выглядело как можно ближе, как на этом сайте.

Я смог сделать стрелку, хотя и не уверен, что это был правильный способ. Предполагаю, что я должен был нарисовать это с SVG. Также анимация выглядит странно, и я не знаю, как сделать ее более плавной.
Здесь мой код:


body { margin: 0 font-size: 16px line-height: 1.528571429 padding: 0 height: 100% } body #contact { height: calc(100vh - 40px) background-color: #ffffff } body #contact .to-top-btn-wrapper { position: absolute z-index: 999 left: 7% bottom: 15% } body #contact .to-top-btn-wrapper .btn-text-wrapper { margin: -35px auto } body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text { font-size: 14px letter-spacing: 0.25em text-align: center color: #676565 text-transform: uppercase } body #contact .to-top-btn-wrapper .to-top-btn { position: absolute top: 0 left: 35px bottom: 25px cursor: pointer } body #contact .to-top-btn-wrapper .to-top-btn .line { border-right: 0.1rem dashed #676565 display: inline-block animation: show 1000ms linear forwards infinite } body #contact .to-top-btn-wrapper .to-top-btn .arrow { position: absolute top: -0.3rem bottom: 0 height: 1rem border-right: 0.1rem solid #676565 display: inline-block } body #contact .to-top-btn-wrapper .to-top-btn .right { left: 0.3rem transform: rotate(-45deg) } body #contact .to-top-btn-wrapper .to-top-btn .left { right: 0.3rem transform: rotate(45deg) } @keyframes show { 0% { height: 5rem } 100% { height: 0rem } }

Свободный перевод вопроса How to animate a dashed arrow? от участника weinde.

Ответ
Работает только с обычным фоновым цветом.


:root {
--arrow-color: white
--arrow-size: 3px
--bg: black
}

body {
margin: 0
height: 100vh

display: flex
align-items: center
justify-content: center

background: var(--bg)
overflow: hidden
}

.arrow {
height: 40vh
width: 10vw

display: grid
grid-template-rows: 1fr auto
justify-items: center
}

.line {
grid-row: 1 / 2
grid-column: 1 / 2

width: var(--arrow-size)

background-color: var(--arrow-color)
background-image: repeating-linear-gradient(to bottom, transparent 0 8px, var(--bg) 8px 13px)
}

.bracket {
box-sizing: border-box
grid-row: 2 / 3
grid-column: 1 / 2

width: 20px
height: 20px

border-left: var(--arrow-size) solid var(--arrow-color)
border-bottom: var(--arrow-size) solid var(--arrow-color)

transform: translateY(calc(-1 * var(--arrow-size))) rotate(-45deg)
}

.arrow::after {
content: ''

grid-row: 1 / 3
grid-column: 1 / 2

width: 100%

background-color: var(--bg)

animation: xxx 2.4s cubic-bezier(0.76, 0.05, 0.34, 0.9) infinite
}

@keyframes xxx {
50% {
transform: translateY(100%)
}

50.1% {
transform: translateY(-100%)
}
}

Потому что анимация происходит вот так:


:root {
--arrow-color: white
--arrow-size: 3px
--bg: black
}

body {
margin: 0
height: 100vh
display: flex
align-items: center
justify-content: center
background: var(--bg)
overflow: hidden
}

.arrow {
height: 40vh
width: 10vw

display: grid
grid-template-rows: 1fr auto
justify-items: center
}

.line {
grid-row: 1 / 2
grid-column: 1 / 2

height: 100%
width: var(--arrow-size)

background-color: var(--arrow-color)
background-image: repeating-linear-gradient(to bottom, transparent 0 8px, var(--bg) 8px 13px)
}

.bracket {
box-sizing: border-box
grid-row: 2 / 3
grid-column: 1 / 2

width: 20px
height: 20px

border-left: var(--arrow-size) solid var(--arrow-color)
border-bottom: var(--arrow-size) solid var(--arrow-color)

transform: translateY(calc(-1 * var(--arrow-size))) rotate(-45deg)
}

.arrow::after {
content: ''
grid-row: 1 / 3
grid-column: 1 / 2
width: 100%
height: 100%
background-color: #FFFF00
animation: xxx 2.4s cubic-bezier(0.76, 0.05, 0.34, 0.9) infinite
}

@keyframes xxx {
50% {
transform: translateY(100%)
}

50.1% {
transform: translateY(-100%)
}
}