Is it possible to set bounce height on CSS text animation?

Question

I am pretty new to css and doing some animations for a friends website. Although I seem to have ran into an issue.

The following animation is a bouncing effect on a text field:

.text {
    animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}

@keyframes text-pop-up-top {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

But the text bounces way too high and is overlapping other text. Is it possible to set the height so it only goes up half the height as set? I apologize if this is an easy solution I haven't been able to figure it out. I really appreciate the help.

Answer 1

The line you want to adjust is this one:

transform: translateY(-50px);

Try adjusting it to:

transform: translateY(-25px);

Update

You may also want to adjust the last part of text-shadow, to decrease the vertical distance of the shadow to remain consistent with the lowered translateY value.

Change this:

text-shadow: … 0 50px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */

To this:

text-shadow: … 0 25px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */

jsFiddle