Need help to make nav menu items glow with CSS3 animation

[designer_newbie]

Been struggling for days to crack this code and add glowing effect to OceanWP menu. I’m new at CSS3 animations, so this has been stressful to say the very least. But, I’m determined to solve the problem. This is my first time asking for help, so please be gentle

The url to the site. Here’s what I’ve tried recently. Most likely my selector is all wrong.

#menu-main-menu{
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

[coothead]

Hi there designer_newbie,

and a warm welcome to these forums.

If you require text-show effects then try changing this…

#menu-main-menu{

…to this…

#menu-main-menu a {

coothead

[PaulOB]

The code you posted would seem to work on its own. If you wanted the glow to go back to zero then just use the ‘to’ part of the keyframe.

This is your page with the code added:

You can see the glow in the picture above.

Also lose the prefixes unless browser support is low (which it is not for those properties) but you must always include the real valid keyframe when you use prefixes. You only show -webkit in your example above.

[designer_newbie]

Thanks so much for the warm welcome Yes, I will try it. Thanks again.

[designer_newbie]

Amazing. Okay, yes. I see my errors. Going to try this out now. Thanks.

[designer_newbie]

This worked beautifully! Thank you. Right now, I’m trying to figure out how to achieve the same effect but instead apply it on hover.

I’m using this code, which works but it doesn’t give the continuous or alternating glow effect like the example you gave previously.

#menu-main-menu a:hover {
  color: #13aff0;
  animation: glow 1s ease-in-out infinite alternate;
  text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #13aff0,
      0 0 40px #13aff0, 0 0 50px #13aff0, 0 0 60px #13aff0, 0 0 70px #13aff0;
  transition: all 0.2s ease-in;
}

I would like there to be more animation or dramatic glowing effect on hover. Any advice? Thanks.

[PaulOB]

@designer_newbie

I would like there to be more animation or dramatic glowing effect on hover. Any advice? Thanks.

Yes just do the key frame animation on hover. A transition only goes from one state to another but you want a continuous animation.

E.g

#menu-main-menu:hover {
  animation: glow 1s ease-in-out infinite alternate;
}

[designer_newbie]

You’re awesome. Thanks for rolling up your sleeves to help someone in need I was able to use your example and write this code that achieved exactly what I needed. Thanks again, tremendously!

#menu-main-menu a:hover {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #13aff0,
      0 0 40px #13aff0, 0 0 50px #13aff0, 0 0 60px #13aff0, 0 0 70px #13aff0;
  }
}
#menu-main-menu a {
  color: #000;
  text-decoration: none;
}