Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Translate already translated element

CSS Translate already translated element

Problem

I'm trying to apply the "bounce" effect from animate.css to an Element that already has the following property in it's style element (added by a third-party JS library):

style="... transform: translate(625px, 471px); ..."

When applying the following bounce animation:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

The element's position prior to the animation doesn't stick and the element moves to the top of the page and animates there.

Is there a variation on this CSS that will apply a bounce effect without overriding the Transform already on the element via the style attribute? I don't really want to hack in to a third party library to wrap the element or anything unless I can help it.

Thanks in advance.

Problem courtesy of: Aiden Bell

Solution

You have to wrap it in another element, if you want relative animations. You don't have to hack into a third party library to do so. You can dynamically insert a div without messing with existing code.

I'd do the following:

// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);

Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Node.replaceChild

Solution courtesy of: jwahdatehagh

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Translate already translated element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×