Snippets/CSS Typing Text
< Snippets
![]() | |
---|---|
Language(s): | CSS |
Compatible with: | MediaWiki 1.22+ (all) |
DescriptionEdit
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.
UsageEdit
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.
ExampleEdit
<div class="typing">Welcome to Wikipedia,the free encyclopedia that anyone can edit.</div>
CodeEdit
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; }
}
NotesEdit
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.