Snippets/CSS Typing Text

How to use Snippets
List of Snippets
CSS Typing Text
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description edit

This CSS snippets creates a short message of text that appears one letter at a time like someone is typing it. Great for short introductory messages when someone lands on a page.

Usage edit

To use simply write your message in between the following divisor:<div class="typing"> and close it with a div </div>. Message needs to be one line and this CSS snippet is for short messages.

Example edit

<div class="typing">Welcome to Wikipedia, the free encyclopedia that anyone can edit.</div>

Welcome to Wikipedia, the free encyclopedia that anyone can edit.

Code edit

CSS Typing Text

/* CSS Typing Text
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]].
 */

.typing{
  margin: 10px 0 0 10px;
    width: 1000px;
   white-space:nowrap;
   overflow:hidden;
  animation: type 18s steps(100, end);
}

@keyframes type{ 
  from { width: 0; } 
}

Notes edit

This snippet is not responsive since it functions the same on all media screens. If that's a problem you should add media query statements in the CSS.