Kevin Powell - Community•2y ago

Animate parent (letter-spacing) on child (a) focus

Backstory I just practically finished creating my personal website (https://xan.lol) but upon using my keyboard to interact with navigation links on the homepage, I was saddened to see them not animate. CSS Question More in-depth I have a link (a) that's animated from it's parent (#homelinks li). When focused (:focus) on by a keyboard, how can I animate the list item?

5 Replies

XanOP•2y ago

A thing to note: I'm not good enough at general frontend so I used a no-code builder to build most of the website, resulting in it all being on one line. I did add custom code to animate the #homelinks li and .biglink li on hover. Update I meant the biglinks class, affecting all links across the single-page website. I've removed any mention of #homelinks

.biglink li {
-webkit-transition: letter-spacing 250ms ease;
-moz-transition: letter-spacing 250ms ease;
-o-transition: letter-spacing 250ms ease;
transition: letter-spacing 250ms;
}

.biglink li:hover, .biglink li a:focus {
letter-spacing: 1rem;
transition: letter-spacing 750ms ease;
}

.biglink li {
-webkit-transition: letter-spacing 250ms ease;
-moz-transition: letter-spacing 250ms ease;
-o-transition: letter-spacing 250ms ease;
transition: letter-spacing 250ms;
}

.biglink li:hover, .biglink li a:focus {
letter-spacing: 1rem;
transition: letter-spacing 750ms ease;
}

Myndi•2y ago

This animation?

Myndi•2y ago

I'm using keyboard and it works.

MarkBoots•2y ago

for me it works as well. the :focus takes care of that but i do see a potential issue. you are applying the effect on the li hover and the a focus. probably you want them both to be on the a so

.biglink li a { ... }
.biglink li a:hover, .biglink li a:focus { ... }

.biglink li a { ... }
.biglink li a:hover, .biglink li a:focus { ... }

XanOP•2y ago

I had solved it @myntsu & @MarkBoots (I applied the tag). This is one of the things I was wondering about. Alright, I applied the code from your suggestion For some reason the animations seemed jittery and after I added a in the css, they weren't laggy anymore.

Gaming

Programming

Animate parent (letter-spacing) on child (a) focus