时间戳

首页 > 解决方案 > 如何在多个字符串上使用 CSS 应用类型编写器动画

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

问题描述

我想type writer在多个字符串上应用动画，我看到大多数开发人员都是在 JS 中做到这一点的，但我只想用 CSS 来做到这一点，到目前为止我只做了 2 个字符串，但仅此而已。如果我为 3rd string 做，3rd string 重叠。

代码笔链接

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; }
    }

标签： cssanimationsass

解决方案

增加动画的时间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; }
}

推荐阅读