4

[CSS] Typing Text Effect

 2 years ago
source link: http://siongui.github.io/2017/03/10/css-typing-text-effect/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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:

[2]CSS3 Animations


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK