Пожалуйста, помогите мне с анимацией CSS Tracing/Tracing Antain ⇐ CSS

[Anonymous]

Я пытаюсь создать анимацию плавной/рисования закругленной линии. Решение, которое у меня есть, работает, но не мое любимое. Моя цель состоит в том, чтобы эта линия текла вниз, а затем вправо, когда открыта страница. Я попытался заглянуть в другое решение с P5.JS и SVG -анимацией, но я не уверен, что будет лучше. Я думаю, что это вина углах для сложности, но это та, что мне нужна форма, к сожалению.







red
blue
white
yellow




function changeSection(section) {
const layout = document.querySelector(".layout");
const line = document.querySelector(".l-line");

layout.setAttribute("data-active-section", section);

const newLine = line.cloneNode(true);
line.parentNode.replaceChild(newLine, line);
}



< /code>

body {
background-color: black;
color: white;
overflow: hidden; }

.layout {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
position: relative;
}

.l-shape {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
pointer-events: none;
z-index: -999;

}
.l-line {
position: absolute !important;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-bottom-left-radius: 100px;
position: relative;
overflow: hidden;
z-index: 1;
}

.l-line::after {
content: "";
position: absolute !important;
top: -30px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid var(--active-line-color);
border-bottom: 20px solid transparent;
border-bottom-left-radius: 100px;
animation: trace-border 1s ease-in-out forwards;
z-index: 2;
}

@keyframes trace-border {
0% {
height: 0;
width: 0;
border-bottom-color: transparent;
}
50% {
height: 100%;
width: 0;
border-bottom-color: transparent;
}
100% {
height: 100%;
width: 100%;
border-bottom-color: var(--active-line-color);
}
}

.layout[data-active-section="red"] { --active-line-color: #D85140; }
.layout[data-active-section="blue"] { --active-line-color: #3555B4; }
.layout[data-active-section="white"] { --active-line-color: #E6E6E6; }
.layout[data-active-section="yellow"] { --active-line-color: #F6B90B; }

.navbar {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}

.navbar button {
background: none;
border: 1px solid white;
color: white;
padding: 10px 20px;
}



Подробнее здесь: https://stackoverflow.com/questions/794 ... animtation