19 CSS Text Animations
Tags: html, css, frontend, webdev
Published: 2023-06-22 08:13:57

Collection of HTML and CSS Text Animation examples. Hand-Picked from codepe.io. The collection is free.

original article on [Frontend Solutions](tech/posts/22-css-text-animation) : [22 Awesome CSS Text Animations](https://www.solutions-blog.tech/posts/22-css-text-animation)

</br>

## 1.Pure CSS Text Animation

![Demo Image: Pure CSS Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phg2rdlp4gl7woaamgxd.png)


Made with: **HTML / CSS (SCSS)**

Created by **Robin Treur**, Created At **September 10, 2016**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/RobinTreur/pen/QKjgPX" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 2. Splitting Splash | Bouncy CSS Text Animation

![Demo Image: Splitting Splash | Bouncy CSS Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq8axpg43p90j63gd3pv.png)

Made with: **HTML / CSS (SCSS) / JS**

Created by **@keyframers**, Created At **April 21, 2020**

Responsive : **no**

Dependencies : **splitting.css**, **splitting.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://dribbble.com/shots/11113924-Laundry-Splash" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">dribbble shot</a> </center>

<center> <a href="https://codepen.io/team/keyframers/pen/vYNyWwQ" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 3. SVG - CSS Text Animation

![Demo Image: SVG - CSS Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz99nb5t1qopwoisgnfj.png)

Made with: **HTML / CSS**

Created by **MIMAXUZ**, Created At **April 3, 2019**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/MIMAXUZ/pen/LvpwZR" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 4. Transmission: Glowing Text Animation

![Demo Image: SVG - Transmission: Glowing Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05b919uzh2oele2fbady.png)

Made with: **HTML / CSS (SCSS) / JS**

Created by **Stephen Scaff**, Created At **June 25, 2016**

Responsive : **no**

Dependencies : **jquery.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/StephenScaff/pen/oLBqmw" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 5. Hand written SVG text animation

![Demo Image: Hand written SVG text animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn63rsr8le73qks1cg9x.png)

Made with: **HTML / CSS (SCSS) / JS (Babel)**

Created by **Matthew Ellis**, Created At **March 3, 2018**

Responsive : **no**

Dependencies : **anime.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/mellis84/pen/JpVZNw" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 6. Text Animation

![Demo Image: Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ojgnt49q3n3xc4ajhuo.png)

Made with: **HTML / CSS (Stylus) / JS (Babel)**

Created by **Short**, Created At **January 23, 2018**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/short/pen/VyNqPa" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 7. Shining Text Animation Effect

![Demo Image: Shining Text Animation Effect - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2v5mykaqa3gwxa5j3vn.png)

Made with: **HTML / CSS**

Created by **FrankieDoodie**, Created At **October 13, 2018**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/FrankieDoodie/pen/dgVGad" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 8. Title Text Animation

![Demo Image: Title Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt2sdlxmybyb36fge9wq.png)

Made with: **HTML / CSS (SCSS) / JS**

Created by **Robin Treur**, Created At **April 2, 2016**

Responsive : **yes**

Dependencies : **jquery.js**, **TweenMax.js**, **lettering.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/RobinTreur/pen/pyWLeB" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 9. Text animation

![Demo Image: Text animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocattep0tqbshg0g7237.png)

Made with: **HTML / CSS / JS**

Created by **Szenia Zadvornykh**, Created At **March 22, 2016**

Responsive : **no**

Dependencies : **three.js**, **bas.js**, **TextGeometry.js**, **TweenMax.js**, **pnltri.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/zadvorsky/pen/GZmKYX" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 10. Decode Text Effect

![Demo Image: Decode Text Effect - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3teuuxgupiqs7vpqy1lu.png)

Made with: **HTML / CSS (SCSS) / JS**

Created by **Ben Racicot** <span class="bg-yellow-200 text-black text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-yellow-300">PRO</span>, Created At **July 18, 2016**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/BRacicot/pen/Nryjpa" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 11. Text animation

![Demo Image: Text animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0xe9hfxgzjrs4qv1ghs.png)

Made with: **HTML / CSS / JS**

Created by **Szenia Zadvornykh** <span class="bg-yellow-200 text-black text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-yellow-300">PRO</span>, Created At **April 7, 2016**

Responsive : **no**

Dependencies : **three.js**, **TextGeometry.js**, **pnltri.js**, **TweenMax.js**, **bas.js**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/zadvorsky/pen/BKJQep" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 12. SVG Text Animation

![Demo Image: SVG Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqgch9o8f5qatq1td8kt.png)

Made with: **HTML / CSS**

Created by **Mack Ayache**, Created At **February 18, 2017**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/Ayachem/pen/KaLbZK" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 13. Loading Text Animation

![Demo Image: Loading Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd8qxgqavercvum08n9k.png)

Made with: **HTML / CSS**

Created by **brunjo**, Created At **December 7, 2014**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/brunjo/pen/ByjRPy" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 14. ✈️ Airport info

![Demo Image: Airport info - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ps7sif6vpkpmw33huyp.png)

Made with: **HTML / CSS**

Created by **Quinto Jesús**, Created At **May 26, 2021**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/jesuskinto/pen/wvJeVez" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 15. Pure CSS Gradient Text Animation

![Demo Image: Pure CSS Gradient Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78dojcsy7t6cwbpp00ih.png)

Made with: **HTML / CSS (SCSS)**

Created by **Casey Callow**, Created At **February 27, 2017**

Responsive : **yes**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/caseycallow/pen/yMNqPY" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 16. happy new year

![Demo Image: happy new year - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gr704ali8fnlobuvaju.png)

Made with: **HTML / CSS**

Created by **ashish jangra**, Created At **December 3, 2015**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/techdesign/pen/GoKejY" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 17. Pure CSS Text Animation

![Demo Image: Pure CSS Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4kuub0be0lbvp7le2j1.png)

Made with: **HTML / CSS**

Created by **Arlina Code**, Created At **May 25, 2018**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/arlinacode/pen/BxgRPb" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 18. Text Animation

![Demo Image: Text Animation - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bva261b5nookp4axtaag.png)

Made with: **HTML / CSS**

Created by **Carlos Córdova**, Created At **January 3, 2022**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/carloscdev/pen/mdBLmwP" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## 19. Welcome Text animaiton

![Demo Image: Welcome Text animaiton - Frontend Solutions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lroetqkcc8szo02uio8j.png)

Made with: **HTML (Pug) / CSS (Stylus)**

Created by **Toshiya Marukubo**, Created At **January 2, 2021**

Responsive : **no**

Dependencies : **-**

Compatible browsers : **Chrome**, **Edge**, **Firefox**, **Opera**, **Safari**

<center> <a href="https://codepen.io/toshiya-marukubo/pen/dypmMQq" class="underline underline-offset-2 
hover:text-orange-500 decoration-orange-500" target="_blank">Demo and code</a> </center>

---

## <center> thanks for reading. </center>