Snippets/CSS Typing Text
< Snippets
![]() | |
---|---|
Language(s): | CSS |
Compatible with: | MediaWiki 1.22+ (all) |
Description
editThis 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
editTo 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
editCSS 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
editThis 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.