css - 如何在多个字符串上使用 CSS 应用类型编写器动画

Question

我想在多个字符串上应用 type writer 动画，我看到大多数开发人员都是在 JS 中这样做的，但我只想用 CSS 来做，到目前为止我只为 2 个字符串做了但没有比那更多的。如果我为第三根弦做，第三根弦重叠。

Code pen link

HTML 代码。

           <h1>I am Kirill 
             <div id="stmt1">Acquistion strategist</div>
             <div id="stmt2">Campaign executioner</div>
             <div id="stmt3">Semi-technical marketing lead</div>
           </h1>   

CSS代码

#stmt2
{
    margin-top:-40px;
}
#stmt1
{
    width: 25em;
    white-space: nowrap;
    overflow: hidden;
    animation: frag1type 10s steps(50, end) 0s infinite;
}
@keyframes frag1type{

        from { width: 0; opacity:1; }
        37%{width:25em;opacity:1; }
        49%{width:0;opacity:1; }
        100%{width:0;opacity:1; }
}

#stmt2
{
        opacity: 0;
        width: 25em;
        white-space: nowrap;
        overflow: hidden;
        animation: frag2type 10s steps(50, end) 5s infinite;
}
@keyframes frag2type{

        from { width: 0; opacity:1; }
        37%{width:25em;opacity:1; }
        49%{width:0;opacity:1; }
        100%{width:0;opacity:1; }
    }

#stmt3
{
    margin-top: -40px;
}
#stmt3
{
        opacity: 0;
        width: 25em;
        white-space: nowrap;
        overflow: hidden;
        animation: frag3type 10s steps(50, end) 7s infinite;
}
@keyframes frag3type{

        from { width:0; opacity:1; }
        37%{width:25em; opacity:1; }
        49%{width:0; opacity:1; }
        100%{width:0; opacity:1; }
    }

Answer 1

将时间增加到 15s 并将动画宽度增加 10% 并减少 25%

animation: frag1type 15s steps(50, end) 0s infinite;
animation: frag2type 15s steps(50, end) 5s infinite;
animation: frag3type 15s steps(50, end) 10s infinite;

@keyframes frag1type{

        from { width: 0; opacity:1; }
        10%{width:25em;opacity:1; }
        25%{width:0;opacity:1; }
        100%{width:0;opacity:1; }
}
@keyframes frag2type{

        from { width: 0; opacity:1; }
        10%{width:25em;opacity:1; }
        25%{width:0;opacity:1; }
        100%{width:0;opacity:1; }
}
@keyframes frag3type{

        from { width: 0; opacity:1; }
        10%{width:25em;opacity:1; }
        25%{width:0;opacity:1; }
        100%{width:0;opacity:1; }
}