Snippets/CSS Typing Text

From MediaWiki.org
Jump to navigation Jump to search
How to use Snippets
List of Snippets
Crystal Clear action run.png
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>

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);
-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[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.