Trying to achieve multiple animations for single element

HTML & CSS
1

Hi All,

Thanks to @PaulOB , I was able to get the glow effect I needed for my element, but now I need to add a bounceInUp effect to the same element. Here’s the code I tried (the glow effect works perfectly but stops once I add the bounceInUp code).:Where is my mistake? Thank you in advance.

.filter_gal_content a:hover {
  font-size: 14px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate, bounceInUp 1s up; 
}

@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;
  }
}
 @keyframes bounceInUp {
            0% {
               opacity: 0;
               transform: translateY(2000px);
            }
            60% {
               opacity: 1;
               transform: translateY(-30px);
            }
            80% {
               transform: translateY(10px);
            }
            100% {
               transform: translateY(0);
            }
         }
.filter_gal_content a {
  color: #000;
  text-decoration: none;
}
2

Whats’ the ‘up’ value?

According to devtools there is no such value.

Screen Shot 2020-12-04 at 13.45.04
Screen Shot 2020-12-04 at 13.45.041067×649 109 KB

You’ll need the infinite value if you want it to keep animating while hovering.

I’m not sure you’ll see much of an effect as you make it invisible for almost 60% of the time and in that time you animate it from outer space back to -30px. I guess you’ll just catch the end of it by the time you can see it. :slight_smile:

1 Like
3

Okay, yes. You are right. I just saw infinite is missing. I will go over it now. Thanks!

4

You would also need the element to be a block box display and not an inline display (which is the default for the anchor) for transform to work.

Only transformable elements can be transform ed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Also be aware that if the effect only happens when hovering and you move the element away from the cursor (as with translate) then the effect is lost as you are no longer hovering the element.

5

Okay, thanks for pointing me in the right direction. Got some work to do! Thanks again.

6

I would suggest that you transform an inner element and in that way the hover stays on the anchor and allows the animation to run.

e.g.

1 Like
7

Thanks @PaulOB. Sorry for delayed response. I’ve been reading up on “transform” and playing around with it. Pretty cool. Here’s what I am working on. Not perfect, but it’s coming along. Thanks again.

.filter_gal_content a { display: block;
    animation-name: floating;
    animation-duration: 3s;
	transition-property: transform;
    animation-timing-function: ease-out;
}
@keyframes floating {
    from { transform: translate(0, 7px); }
    to   { transform: translate(0, 7px); }
8

I think there’s a typo there as the start and end are the same which means no animation :slight_smile:
Use shorthand where possible otherwise the code gets very bulky and is harder to tread.

e.g.
animation:floating 3s ease-out;

9

Okay, I’ll check it out. Somehow, I’m able to achieve the desired effect. So, I need to clean it up. Thanks.

1 Like
10

The transition property doesn’t apply to css animations it applies to transitions.:slight_smile: Although you can do both at the same time they are not the same. I’d need to see all your code to check what’s needed or not.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.