特定の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; 
}