CSS: Typewriter effectが流行っているようだ

https://coliss.com/articles/build-websites/operation/javascript/typewritten-text-used-custom-elements.html

というものにあやかり。


## Dev.To でTypewriter合戦が繰り広げられていた

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNwVpdd" data-user="alvaromontoro" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvaromontoro/pen/rNwVpdd">
  CSS-only typewriter text animation</a> by Alvaro Montoro (<a href="https://codepen.io/alvaromontoro">@alvaromontoro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

引用: [Typewriter Effect with CSS - DEV Community 👩‍💻👨‍💻](https://dev.to/alvaromontoro/typewriter-effect-with-css-38im)

[Animated no-element typewriter - DEV Community 👩‍💻👨‍💻](https://dev.to/alvaromontoro/animated-no-element-typewriter-2835)


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LYLZOrE" data-user="alvaromontoro" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/alvaromontoro/pen/LYLZOrE">
  Yet another CSS-only typewriter effect</a> by Alvaro Montoro (<a href="https://codepen.io/alvaromontoro">@alvaromontoro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

引用: [Multiline CSS-only typewriter effect - DEV Community 👩‍💻👨‍💻](https://dev.to/alvaromontoro/multiline-css-only-typewriter-effect-18p4)

[A scalable CSS only Typewriter Effect - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/a-scalable-css-only-typewriter-effect-2opn)

[The CSS 'Scrabble' writer — The next gen typewriter - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/the-css-scrabble-writer-the-next-gen-typewriter-fbi)

[A Multi-line CSS only Typewriter effect - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/a-multi-line-css-only-typewriter-effect-3op3)



<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwWKMeQ" data-user="t_afif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/t_afif/pen/VwWKMeQ">
  The Filling writer</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

引用: [Upgrading the CSS only Multi-line Typewriter effect - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/upgrading-the-css-only-multi-line-typewriter-effect-2269)

[⌨️ An ACTUAL typewriter (that auto types and is interactive too!) 🤯 - DEV Community 👩‍💻👨‍💻](https://dev.to/inhuofficial/an-actual-interactive-typewriter-2hg9)

[A Typewriter, but with no HTML, CSS, or JS?! - DEV Community 👩‍💻👨‍💻](https://dev.to/auroratide/a-typewriter-but-with-no-html-css-or-js-1bgd)

[A Typewriter, but using a New HTML Tag - DEV Community 👩‍💻👨‍💻](https://dev.to/auroratide/a-typewriter-but-using-a-new-html-tag-60i)


## 関連

https://qiita.com/e99h2121/items/343b401de01e5bdf5f5c

https://yokwejuste.live/the-ultimate-solution-to-typewriter-animation

ここ最近で集めたもの。以上お楽しみいただければさいわいです。