Snippets/CSS Typing Text

How to use Snippets
List of Snippets

CSS Typing Text
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Contents

Description

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

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

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

Code

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);
-webkit-animation:type 18s steps(100, end); 
  -moz-animation:type 18s steps(100, end); 
 -o-animation:type 18s steps(100, end); 
}

@keyframes type{ 
  from { width: 0; } 
} 
@-webkit-keyframes type{ 
  from { width: 0; } 
} 
@-moz-keyframes type{ 
  from { width: 0; } 
@-o-keyframes type{ 
  from { width: 0; } 
}

Notes

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.