Share examples of js typing effects without using jquery

Copy codeThe Code is as follows:
<H1> Libraries give you <span class = "txt-rotate fw700" data-period = 500 "data-rotate = '[" knowledge "," community ", "an outlet", "Chinese origin", "OSCHINA"] '> </span>

Copy codeThe Code is as follows:
Html, body {
Font-family: 'opensans ', 'helvetica Neue', Sans-serif;
Padding: 3em 2em;
Font-size: 18px;
Background: # fff;
Color: #009966;
}

H1, h2 {
Font-weight: 300;
Margin: 0.4em 0;
}
H1 {font-size: 3.5em ;}
H2 {font-size: 2.5em; font-weight: 700; color: #505050 ;}
H3 {
Color: #505050;
Font-size: 1.5em;
}
. Fw700 {
Font-weight: 700;
}
Input {
Font-size: 100%;
Background: # fff;
Border: none;
Color: #000;
Padding: 12px;
Margin: 0-0.25em 0 0.3em;
Border-top-left-radius: 9px;
Border-bottom-left-radius: 9px;
Box-shadow: 0 0 5px rgba (0,0, 0, 0.5) inset;
}
# Call {
Border-top-right-radius: none;
Border-radius: none;
}
:-Webkit-input-placeholder {
Color: #222;
}

:-Moz-placeholder {/* Firefox 18 -*/
Color: #222;
}

:-Moz-placeholder {/* Firefox 19 + */
Color: #222;
}

:-Ms-input-placeholder {
Color: #222;
}

. Inline {
Display: inline;
}

. Button {
Display: inline-block;
Background: #009966;
Color: # fff;
Font-weight: 700;
Text-decoration: none;
Padding: 0.44em 0.89em 0.39em;
Margin: 0 1em 0 0;
Border-top-right-radius: 9px;
Border-bottom-right-radius: 9px;
Border-top-left-radius: 0;
Border-bottom-left-radius: 0;
Margin-left: 0px;
Font-size: 1em;
Box-shadow: none;
Border: 1px solid rgba (0, 0, 0, 0.1 );
Border-left: none;
}

. Field-wrapper {
Position: relative;
Margin-bottom: 20px;
Display: inline-block;
}

Label {
Position: absolute;
Bottom:-20px;
Left: 6px;
Font-size: 16px;
Color: # aaa;
Transition: all 0.1 s linear;
Opacity: 0;
Font-weight: bold;
Display: block;
}

Label. on {
Color: #4481C4;
}

Label. show {
Bottom:-30px;
Opacity: 1;
}

Body {
/* The following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail? Id = 108025 */
-Webkit-backface-visibility: hidden;
}