Shake effect not working

Hey,

Im very new to javascript and css…please keep that in mind :slightly_smiling_face: Ive been struggling with this project im doing for school. I want a menu slightly animated but for some strange reason the hover effect on the first menu item (havent coded the rest )isnt working?? Could someone please help me out here… thank you!

https://codepen.io/ooxablon/project/editor/ApwdxJ

Hey @Ooxablon,
I tried your pen, and it looks like your hover effect works perfectly fine

Yeah theres a hover that works but If u resize the window and make the viewport higher. U will see there shud be another hover in the first panel when the same word comes down and u put ur mouse on it a small p pops up and a line… but there shud also be a shake effect on the word that came down. Hope u understand. You cud take a look at the end of the css file and try to find that animation :slight_smile:

What do you mean by shake? Like left to right shaking?

Yes a kind of wiggle

If i put a hover on the parent .sub it works but thats not what i want.

What you can do is create a shaking @keyframes that will make the element wiggle a little and then apply it to the text when it is hovered.

its in there @keyframes shake. But it just came to me…i changed the to inline block now it works fine :). thx for helping me out tho! Looks like a lost my line animation at the same time …not out of the woods yet :stuck_out_tongue:

1 Like