Hello Animation

HTML
<div class="content"> <div class="display"> <p>Hello</p> <ul> <li>World</li> <li>Codepad</li> <li>Developers </li> <li>Everbody!</li> </ul> </div> </div>
SCSS
body { width:100%; height:100%; position:fixed; background-color:#212121; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; line-height: 40px; font-family:'Monospace'; color: #E3F2FD; height: 160px; overflow:hidden; } .display { font-weight:300; overflow:hidden; height:40px; padding:0 42px; &:before { content:'<'; left: 0; line-height:40px; } &:after { content:' />'; position:absolute; right: -8px; line-height:40px; } &:after, &:before { position:absolute; top:0; color:#18FFFF; font-size:44px; animation:2s linear 0s normal none infinite opacity; } } p { display:inline; float:left; margin:0; } ul { margin-top:0; padding-left:120px; text-align:left; list-style:none; animation:6s linear 0s normal none infinite change; } ul li { line-height:40px; margin:0; } @keyframes opacity { 0%, 100% {opacity:0;} 50% {opacity:1;} } @keyframes change { 0%,18%,100% {transform:translateY(0);} 25%,43% {transform:translateY(-25%);} 50%,69% {transform:translateY(-50%); } 75%,95% {transform:translateY(-75%);} }
JAVASCRIPT
Expand for more options Login