cssを使ってループするタイプライターのテキストエフェクトを作る方法

Question

こんにちは、CSSを使ってページにタイプライターのテキストエフェクトをしようとしていますが、タイピング効果を与える特定のスニペットがありますが、ループ

にこれは、初期のコードは

<div class="typewriter"> 
    <h1>The cat and the hat.</h1> 
</div> 

/* DEMO-SPECIFIC STYLES */ 
.typewriter h1 { 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
    border-right: .15em solid orange; /* The typwriter cursor */ 
    white-space: nowrap; /* Keeps the content on a single line */ 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
    letter-spacing: .15em; /* Adjust as needed */ 
    animation: 
    typing 3.5s steps(40, end), 
    blink-caret .75s step-end infinite; 
} 

/* The typing effect */ 
@keyframes typing { 
    from { width: 0 } 
    to { width: 100% } 
} 

/* The typewriter cursor effect */ 
@keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: orange; } 
} 

で働いていているいくつかのいずれかが、このループを作る方法をexpatiateてくださいすることができ、私はあなたがそこに無限の単語を含める必要があることをオンラインで読むが、私はどこKNW DNTこれを追加してください。

Answer 1

animation-iteration-count: infinite;〜.typewriter h1がループします。

/* DEMO-SPECIFIC STYLES */ 
 

 
.typewriter h1 { 
 
    overflow: hidden; 
 
    /* Ensures the content is not revealed until the animation */ 
 
    border-right: .15em solid orange; 
 
    /* The typwriter cursor */ 
 
    white-space: nowrap; 
 
    /* Keeps the content on a single line */ 
 
    margin: 0 auto; 
 
    /* Gives that scrolling effect as the typing happens */ 
 
    letter-spacing: .15em; 
 
    /* Adjust as needed */ 
 
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; 
 
    animation-iteration-count: infinite; 
 
} 
 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 100% 
 
    } 
 
} 
 
/* The typewriter cursor effect */ 
 

 
@keyframes blink-caret { 
 
    from, to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: orange; 
 
    } 
 
}

<div class="typewriter"> 
 
    <h1>The cat and the hat.</h1> 
 
</div>