[CSS] Typing Text Effect
Demo
Typing text effect via pure CSS is very restricted. One of the restrictions is that only the first line of the text is typed. JavaScript typing effect is better and without the restrictions [3] [4].
Source Code
Two possible ways to achieve the same effect.
First Way
HTML:
<span data-typedtext="願我得喜樂。願我離憂苦。願我不受敵意。願我不受壓迫。願我免遭困難。願我輕鬆照顧自己。"></span>
CSS:
[data-typedtext]::after {
content: attr(data-typedtext);
}
[data-typedtext]::after {
display: block;
animation-name: typing;
animation-duration: 6s;
animation-timing-function: linear;
}
@keyframes typing {
0% {width:0; white-space: nowrap; overflow: hidden;}
99% {width:99%; white-space: nowrap; overflow: hidden;}
100% {width: 100%;}
}
Second Way
HTML:
<span class="css-typing">願我得喜樂。願我離憂苦。願我不受敵意。願我不受壓迫。願我免遭困難。願我輕鬆照顧自己。</span>
CSS:
.css-typing {
display: block;
animation-name: typing;
animation-duration: 6s;
animation-timing-function: linear;
}
@keyframes typing {
0% {width:0; white-space: nowrap; overflow: hidden;}
99% {width:99%; white-space: nowrap; overflow: hidden;}
100% {width: 100%;}
}
Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
References:
| [1] |
| [2] | CSS3 Animations |
| [3] | [JavaScript] Typing Text Effect |
| [4] | [Vue.js] Typing Text Effect |