Awesome CSS Text Animations

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

original article on Frontend Solutions : 22 Awesome CSS Text Animations

1.Pure CSS Text Animation

Made with: HTML / CSS (SCSS)

Created by Robin Treur, Created At September 10, 2016

Responsive : yes

Dependencies : -

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

Demo and code

---

2. Splitting Splash | Bouncy CSS Text Animation

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

dribbble shot Demo and code

---

3. SVG - CSS Text Animation

Made with: HTML / CSS

Created by MIMAXUZ, Created At April 3, 2019

Responsive : no

Dependencies : -

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

Demo and code

---

4. Transmission: Glowing Text Animation

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

Demo and code

---

5. Hand written SVG text animation

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

Demo and code

---

6. Text Animation

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

Demo and code

---

7. Shining Text Animation Effect

Made with: HTML / CSS

Created by FrankieDoodie, Created At October 13, 2018

Responsive : yes

Dependencies : -

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

Demo and code

---

8. Title Text Animation

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

Demo and code

---

9. Text animation

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

Demo and code

---

10. Decode Text Effect

Made with: HTML / CSS (SCSS) / JS

Created by Ben Racicot PRO, Created At July 18, 2016

Responsive : yes

Dependencies : -

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

Demo and code

---

11. Text animation

Made with: HTML / CSS / JS

Created by Szenia Zadvornykh PRO, 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

Demo and code

---

12. SVG Text Animation

Made with: HTML / CSS

Created by Mack Ayache, Created At February 18, 2017

Responsive : yes

Dependencies : -

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

Demo and code

---

13. Loading Text Animation

Made with: HTML / CSS

Created by brunjo, Created At December 7, 2014

Responsive : no

Dependencies : -

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

Demo and code

---

14. ✈️ Airport info

Made with: HTML / CSS

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

Responsive : no

Dependencies : -

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

Demo and code

---

15. Pure CSS Gradient Text Animation

Made with: HTML / CSS (SCSS)

Created by Casey Callow, Created At February 27, 2017

Responsive : yes

Dependencies : -

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

Demo and code

---

16. happy new year

Made with: HTML / CSS

Created by ashish jangra, Created At December 3, 2015

Responsive : no

Dependencies : -

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

Demo and code

---

17. Pure CSS Text Animation

Made with: HTML / CSS

Created by Arlina Code, Created At May 25, 2018

Responsive : no

Dependencies : -

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

Demo and code

---

18. Text Animation

Made with: HTML / CSS

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

Responsive : no

Dependencies : -

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

Demo and code

---

19. Welcome Text animaiton

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

Demo and code

---

thanks for reading.