如何做一個特定的JQUERY文本動畫？

Question

當我遇到一些很酷的東西時，我試圖提高我的網絡技能。最近我遇到了這種CSS文字動畫，其中單詞被刪除並且新單詞是類型。這些鏈接都低於：

1. https://www.betterment.com/
2. https://www.veritas.com

我也試圖從https://jsfiddle.net/krs8785/jdfgo5on/複製，但如何讓動畫效果嗎？

參考 - https://codyhouse.co/gem/css-animated-headlines

<div class="inner"> 
 
    <h2 class="animated-headline" data-delay=2000>A investment service built for 
 
     <br> 
 
     <span class="animation fifth">unpredictable markets.</span> 
 
     <span class="typed-cursor">|</span> 
 
     <span class="headline-partial">retiring comfortably.</span> 
 
     <span class="headline-partial">lowering fees.</span> 
 
     <span class="headline-partial">dreaming big.</span> 
 
    </h2> 
 
    
 
</div> 
 
<style> 
 
    .inner .animated-headline .animation, 
 
    .inner .animated-headline .animation.first { 
 
     color: #90caf9 
 
    } 
 
    .inner .animated-headline .animation.second { 
 
     color: #7fb800 
 
    } 
 
    .inner .animated-headline .animation.third { 
 
     color: #ffb400 
 
    } 
 
    .inner .animated-headline .animation.fourth { 
 
     color: #90caf9 
 
    } 
 
    .inner .animated-headline .animation.fifth { 
 
     color: #7fb800 
 
    } 
 
    .inner .animated-headline .headline-partial { 
 
     display: none 
 
    } 
 

 
    @keyframes blink { 
 
     0%, 100% { 
 
      opacity: 1 
 
     } 
 
     50% { 
 
      opacity: 0 
 
     } 
 
    } 
 

 
    .inner .animated-headline .typed-cursor { 
 
     color: #999; 
 
     font-weight: 300; 
 
     opacity: 1; 
 
     animation: blink .7s infinite; 
 
     display: inline-block 
 
    } 
 
</style>

Answer 1

你可以做到這一點與CSS

檢查這些小提琴

https://jsfiddle.net/vigneshvdm/x8obp5ew/

http://jsfiddle.net/vigneshvdm/mcjbt5em/

h1 { 
    font-size:150%; 
    width:16.3em; 
    white-space:nowrap; 
    overflow:hidden; 
    border-right: .1em solid black; 

    -webkit-animation: typing 10s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
    -moz-animation: typing 10s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
}