DEV Community

Cover image for Awesome CSS Text Animations
Frontend Solutions
Frontend Solutions

Posted on • Updated on

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

Demo Image: Pure CSS Text Animation - Frontend Solutions

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

Demo Image: Splitting Splash | Bouncy CSS Text Animation - Frontend Solutions

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

Demo Image: SVG - CSS Text Animation - Frontend Solutions

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

Demo Image: SVG - Transmission: Glowing Text Animation - Frontend Solutions

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

Demo Image: Hand written SVG text animation - Frontend Solutions

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

Demo Image: Text Animation - Frontend Solutions

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

Demo Image: Shining Text Animation Effect - Frontend Solutions

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

Demo Image: Title Text Animation - Frontend Solutions

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

Demo Image: Text animation - Frontend Solutions

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

Demo Image: Decode Text Effect - Frontend Solutions

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

Demo Image: Text animation - Frontend Solutions

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

Demo Image: SVG Text Animation - Frontend Solutions

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

Demo Image: Loading Text Animation - Frontend Solutions

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

Demo Image: Airport info - Frontend Solutions

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

Demo Image: Pure CSS Gradient Text Animation - Frontend Solutions

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

Demo Image: happy new year - Frontend Solutions

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

Demo Image: Pure CSS Text Animation - Frontend Solutions

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

Demo Image: Text Animation - Frontend Solutions

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

Demo Image: Welcome Text animaiton - Frontend Solutions

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.

Top comments (0)