Using CSS translateY()

I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.

Now assume I have a CSS as follows.

.bubble
{
    -webkit-transition: -webkit-transform 1s ease-in-out;
}

.bubble.move
{
    -webkit-transform: translateY(-50px);
}

As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current 开发者_高级运维position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?

Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:

.bubble {
  position:absolute;
  top:100%;
  transition:top 1s ease-in-out;
}
.bubble.move {
  top:50px;
}

Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.

Have you tried positioning the element absolutely instead of relatively?

Use javascript to calculate it and set the css using javascript too