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]].

  margin: 10px 0 0 10px;
    width: 1000px;
  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.