CODEWITHSUNDEEP
css
Itai.Lewin
Itai.Lewin

Reputation: 41

CSS animation: Difference between left:100% and translate(100%)

I have read about how using translate has better performance, but it seems they behave slightly differently: using left:100% moves the animated object all the way to the end of the screen, whereas translate(100%) only moves the animated object as far as its length. That is, it moves 100% of the screen versus 100% of the object.

Can explain why this is, and what can be done to reproduce the same behavior when using translate?

You can see a demo here: http://jsfiddle.net/32VJV/1/

.slide_1 {
    top: 0px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_1 {
    -webkit-animation: slide 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
.slide_2 {
    top: 25px;
    left:0%;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}
.slide_2 {
    -webkit-animation: slide2 3s infinite;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0% 0%;
}
@-webkit-keyframes slide {
    0% {
        -webkit-transform: translate(0%);
    }
    50% {
        -webkit-transform: translate(100%);
    }
    100% {
        -webkit-transform: translate(0%);
    }
}
@-webkit-keyframes slide2 {
    0% {
        left 0%;
    }
    50% {
        left:100%;
    }
    100% {
        left:0%;
    }
}

<div style="font-size:18px;">
    <div class=""> <span class="slide_1" id="dimensions">ABC</span>  <span class="slide_2" id="dimensions">ABC</span>

    </div>
</div>

Upvotes: 4

Views: 9178

Answers (1)

dc5
dc5

Reputation: 12441

The difference between the two is that animating a property like left will keep the element in the flow of the document whereas translate does not.

For more information on why you might use one or the other, Paul Irish has an excellent write up (with links to more information): Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

There's also a lot of great information on browser performance at jankfree.org

Solution for the translate animation: make the element as wide as the window:

Example

slide_1 {
    top: 0px;
    left:0%;
    right: 0;
    position: absolute;
    overflow: hidden;
    font-size: 30px;
}

An interesting exercise: Open your devtools and what what happens when you activate one animation at a time.

In Chrome:

  • The translate animation has basically nothing going on except a periodic GC
  • The Left animation you will see repeatedly:
    • Recalculate Style
    • Layout
    • Pain Setup
    • Paint
    • Composite Layers

In this case, the overhead it pretty small, but that can change quickly depending on what is being moved around the screen.

Upvotes: 6

Related Questions