有人能幫我復制馬恒達上的動畫紅線嗎？

我已經嘗試使用CSS，但它不起作用。

我已經復制了現有的CSS，但我沒有運氣，這似乎是一件簡單的事情，但我不能讓它工作。

編輯:我已經讓它工作了，但只有在懸停時，有沒有辦法自動完成？

這是我的代碼:

.content {
    position: absolute;
    width: 60%;
    left: calc(5% + 0.75rem);
    transform: translate(0, 0%);
    top: 20%;
    color: #000;
    z-index: 2;
}

.content:before {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    left: 0;
    top: 50px;
    transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
    clip-path: inset(0 100% 0 0);
}

.content:after {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    left: 0;
    bottom: auto;
    top: 50px;
    transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
    clip-path: inset(0 100% 0 0);
}

.content:hover:after {
    clip-path: inset(0 0% 0 0);
    transition: all 0.6s linear;
    transition-delay: 1s;
}

.content:hover:before {
    clip-path: inset(0 0% 0 0);
    transition: all 0.6s linear;
    transition-delay: 0s;
}

<div class="content text-center text-lg-start active">
    <small style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">ABOUT US</small>
    <h1 class="heading font-medium font-size-tb" style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Planet, People, Trust</h1>
    <p style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Committed to drive positive change across global markets and communities.</p>
</div>

基本上，你有::after和::before，你重寫了它們。既然你希望它是& quot自動& quot，你應該使用CSS動畫。

我創作了一部動畫。還增加了動畫——延時:750ms屬性make ::after在啟動前等待750毫秒(因此::before將工作1000毫秒，750毫秒后::after將啟動)。還增加了不透明度:0；to ::after在放映::before的時候隱藏，在動畫結束的時候改成1，還有我加了動畫-填充-模式:forwards保持最后的狀態。

此外，我刪除了許多不需要的東西(除非您將它們用于其他目的)，所以這是最終的代碼:

.content {
    position: absolute;
    width: 60%;
    left: calc(5% + 0.75rem);
    transform: translate(0, 0%);
    top: 20%;
}

@keyframes animation {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

.content:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 8px;
    background: #dd052b;
    top: 50px;
    animation: animation 1s;
    transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
}

.content:after {
    opacity: 0;
    content: "";
    position: fixed;
    width: 120px;
    height: 8px;
    background: #dd052b;
    top: 50px;
    animation: animation 1s;
    animation-delay: 750ms;
    animation-fill-mode: forwards;
    transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
}

<div class="content">
    <small>ABOUT US</small>
    <h1>Planet, People, Trust</h1>
    <p>Committed to drive positive change across global markets and communities.</p>
</div>