Reputation: 16055

CSS Transition doesn't work with top, bottom, left, right

I have an element with style

position: relative;
transition: all 2s ease 0s;

Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves instantly.

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

However, if I change the color property, for example, it changes smoothly.

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

What might be the cause of this? Are there properties that aren't 'transitional'?

EDIT: I guess I should have mentioned that this is not jQuery, it's another library. The code appears to work as intended, styles are being added, but transition only works in the second case?

Upvotes: 142

Answers (6)

krishna saini

Reputation: 11

Under the hood while animation

Modern web browsers heavily optimize animations and transitions by using hardware acceleration. This means that animations and transitions are often delegated to the GPU (Graphics Processing Unit) for smoother rendering.

Concern

You should avoid using transitions with the left/top/right/bottom properties. it can result in flickering/slow or janky animations.

Those don’t create a fluid animation because they have the browser creating layouts each time, which will affect all of their children. it often triggers a "reflow" and a "repaint" of the entire page. Also, they aren't always hardware-accelerated, leading to slower and less smooth animations.

Solution

Use CSS transitions and animations with properties like transform and opacity when you animate as they have no impact on the flow and are much smoother. They are hardware-accelerated in most cases.

Pro-tip : `will-change`

The will-change CSS property is used to provide a hint to the browser about which properties are likely to change and be animated in the future. This hint allows the browser to optimize the rendering of these properties, resulting in better animation performance.

In many cases, when you apply will-change to an element, the browser will promote that element to its own GPU-accelerated layer. This means that the element and the specified property are rendered separately from the rest of the page, which can improve rendering performance.

Warning: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

Upvotes: 1

Robert Shaw

Reputation: 587

Are there properties that aren't 'transitional'?

Answer: Yes.

If the property is not listed here it is not 'transitional'.

Reference: Animatable CSS Properties

Upvotes: 2

xec

Reputation: 18034

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.

It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

Upvotes: 273

LWChris

Reputation: 4221

Something that is not relevant for the OP, but maybe for someone else in the future:

For pixels (px), if the value is "0", the unit can be omitted: right: 0 and right: 0px both work.

However I noticed that in Firefox and Chrome this is not the case for the seconds unit (s). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay) does not (it does work in Edge however).

In the following example, you'll see that right works for both 0px and 0, but transition only works for 0s and it doesn't work with 0.

#box {
    border: 1px solid black;
    height: 240px;
    width: 260px;
    margin: 50px;
    position: relative;
}
.jump {
    position: absolute;
    width: 200px;
    height: 50px;
    color: white;
    padding: 5px;
}
#jump1 {
    background-color: maroon;
    top: 0px;
    right: 0px;
    transition: right 1s ease 0s;
}
#jump2 {
    background-color: green;
    top: 60px;
    right: 0;
    transition: right 1s ease 0s;
}
#jump3 {
    background-color: blue;
    top: 120px;
    right: 0px;
    transition: right 1s ease 0;
}
#jump4 {
    background-color: gray;
    top: 180px;
    right: 0;
    transition: right 1s ease 0;
}
#box:hover .jump {
    right: 50px;
}

<div id="box">
  <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
  <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

Upvotes: 4