Back to Browse

Make accessible text animation with HTML and CSS [no JavaScript]

436 views
Aug 18, 2021
5:24

In this video, I show you how to create a simple but effective text animation using HTML and CSS - no JavaScript needed! We'll also make sure the text is accessible when read by screen readers, too. 00:37 - the HTML 01:17 - reducing space between the letters with negative letter spacing 01:50 - declaring the animation with @keyframes 02:35 - using the animation 03:40 - making the letters move at different times with animation-delay and nth-child 04:30 - the finished animation 04:44 - making the text animation accessible to screen readers -- const me = { name: "Leanne 👩🏻", passions: ["coffee☕️", "code 💻", "cats 🐱"], unpopular_opinion: "LOVES CSS ❤️", favorite_colors: ["hotpink", "orangered"], channel_aim: "Show the world that CSS is fun and web development rules! 👑" } -- 🐤 Say hi on Twitter: https://twitter.com/RybaLeanne 🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge

Download

0 formats

No download links available.

Make accessible text animation with HTML and CSS [no JavaScript] | NatokHD