Help with Fade Out or Dissolve text, in CSS animation

HTML & CSS
1

This code I’m using displays successfully sliding out text horizontally across the page. However, I’d like it to only display temporarily, I’ve searched css amination and tried several things without success. Sliding text back out would be one solution, but I’m not adding the code correctly apparently. Ideally, I’d actually like something more interesting than simply sliding back, like fading out or dissolving the text, etc. How can I add slide back, fade or some type of dissolve text to this code. I’m open to suggestion. Here’s the current working code:

.animation-box4 {
  min-height: 4.5rem;
  margin: 15% auto 0;
  display: flex;
  align-items: center;
  width: 80%;
  overflow: hidden;
}

.message {
  font-size: 30px;
  display: inline-block;
  font-weight: 900;
  font-family: sans-serif;
}

.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.sliding-text-1 {
  animation-delay: 5s;
  color: #ff00ff;
}

.sliding-text-2 {
animation-delay: 6.5s;
color: #ccc;
}

.sliding-text-3 {
  animation-delay:8s;
  color: #fff;
}

u/keyframes slide {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
  }

Any guidance or examples are welcomed.
Thanks for all previous help.

2

You didn’t post any html for us to test with but If I understand your question then you just amend your keyframes accordingly.

At 50% you could have the element where you want it and then from 50% to 100% you can bring it back or fade it out again as required.

You don’t have to have just one action in a keyframe. You could for example travel an element to the right and then send it downwards and then back again and up to make it travel a square.

It’s not possible to dissolve an element in CSS but you can blur it and fade it out.

Without a demo of the animation you have then its hard for me to give a specific answer.

Here’s a simple demo anyway than you can deconstruct :slight_smile:

1 Like
3

Thanks again for your kind help.
I’ve experimented with you code and researched online some more regardind css animation, but am not clear yet on how your keyframes % example works with my “to” and “from” and (200px) code.

Any additional input in welcomed.

4

What is it you don’t understand?

If you want to slide your text 200px and back 200px and then fade out then the example I gave should show all you need to know.

Just slide your text in to where you want. That would be your start 0% of the key frame. (You can’t use to and from because you want a few actions not just 2.)

Next slide it back at say 30 - 50%. Then from 50% to 100% fade/ blur the element out to finish. All those effects are already baked in the demo I gave so just remove the bits you don’t want.

Have a go yourself and if you get stuck then post your code and it will let me know where you are going wrong.

1 Like
5

Thank you again. I appreciate the further clarification.
The code now shows:

@keyframes slide {
  0% {
    transform: translateX(200px);
  }
  50% {
    transform: translateX(0px);
    opacity: 1;
  }
    60% {
      transform: translateX(0px);
      opacity: 1;
  }
    70% {
      transform: translateX(0px);
      opacity: 1;
  }
    80% {
      transform: translateX(0px);
      opacity: 1;
  }
    90% {
      transform: translateX(0px);
      opacity: .5;
  }

  100% {
    transform: translate(0px);
    opacity: 0;
  }
}

along with this:

animation-duration: 10s;

which slides out the text and then fades it out successfully. Thanks.

I have another question, so tell me if it should be a new posting.
I liked how fast the text slide out when it was:
animation-duration: 1s
using the ‘to’ and 'from" that was fine, because it slide out fast and stayed displayed.
But, of course if I keep:
animation-duration: 1s
with the new keyframes, it slides out fast and then disappers too quickly.
I looked/searched for how to get the text to linger for a while and then disappear, but they only thing I could find was to lengthen the duration, which makes it slide out too slow.
How can the text slide out as fast as it did, linger(pause) and then fade away after x seconds?

I look forward to your reply/feedback … much thanks again

6

Ok you have to use the time available during the keyframe duration to do the things you want.

If you want it to slide for 1s then stay still for say 2s then slide back for 1s and then fade out for 2s after its stopped then the animation duration is 6s.

Now you just divide 6s by 100% to get the percentage required for each second of the keyframe.

Therefore first work out how long you want each part of the animation to take and then you can use math to work out the key frame percentage for each.

If for example you had 5 equal actions over 10 seconds then they’d need 20% each for the key frames.

0% {start position }
20%{first stop position - has taken 2s}
40%{same rule as before so nothing happens for 2s}
41%{start another action}
60%{stop another action}
80%{same rule as before so we do nothing for 2s}
81%{start final effect}
100%{finish last effect}

Is that any clearer? :slight_smile:

1 Like
7

‘to’ and ‘from’ equates to 0% and 100%.

e.g. These are the same:

@keyframes slide {
     0% {
         transform: translateX(200px);
    }
     100%{
         transform: translateX(0px);
    }
}

Is the same as :slight_smile:

@keyframes slide {
     from {
         transform: translateX(200px);
    }
     to {
         transform: translateX(0px);
    }
}

The difference being is that from and to are just the start and finish points. If you want intermediate steps then you need to use percentages as shown previously.

Maybe a simpler example will help :slight_smile:

8

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