Jerky CSS Transform Transition in Chrome

Jerky CSS transform transition in Chrome

Transformations seem to work better than transitions in Chrome. Try this:

.social {

  position: relative;

  list-style: none;

}

.social > li > a {

  text-indent: 100%;

  white-space: nowrap;

  overflow: hidden;

  color: transparent;

}

.social > li > a {

  text-indent: 100%;

  white-space: nowrap;

  overflow: hidden;

  color: transparent;

}

.fbook,

.twit,

.tmblr,

.pntrst,

.insta {

  background: url(http://placehold.it/350x150) center center;

  width: 78px;

  height: 90px;

  background-size: cover;

  float: left;

  margin: 30px;

  -webkit-transform: translate(0px, 0);

  -webkit-transition: -webkit-transform 0.8s ease;

  -moz-transform: translate(0px, 0);

  -moz-transition: -moz-transform 0.8s ease;

  transform: translate(0px, 0);

  transition: -webkit-transform 0.8s ease;

}

.fbook {

  background-position: 0 0

}

.twit {

  background-position: -78px 0

}

.tmblr {

  background-position: -156px 0

}

.pntrst {

  background-position: -232px 0

}

.insta {

  background-position: -310px 0

}

.fbook:hover,

.twit:hover,

.tmblr:hover,

.pntrst:hover,

.insta:hover {

  -webkit-transform: scale(1.5);

  -moz-transform: scale(1.5);

  transform: scale(1.5);

}

<ul class="social">

  <li><a href="" class="fbook">Facebook</a>

  </li>

  <li><a href="" class="twit">Twitter</a>

  </li>

  <li><a href="" class="tmblr">Tumbler</a>

  </li>

  <li><a href="" class="pntrst">Pinterest</a>

  </li>

  <li><a href="" class="insta">Instagram</a>

  </li>

  <li><a href="" class="rss">RSS</a>

  </li>

</ul>

Push side menu jerky CSS transform transition in Chrome

Solved. It was not about browser reflow, backface-visibility:hidden or whatever, it was about matching the css transition settings; I've modified like this:

#responsive-menu-pro-button,
#responsive-menu-pro-container,
#responsive-menu-pro-header,
button#responsive-menu-pro-button,
.edge-wrapper {
    -webkit-transition: 2.6s ease;
    -moz-transition: 2.6s ease;
    -ms-transition: 2.6s ease;
    -o-transition: 2.6s ease;
    transition: 2.6s ease;
    -ms-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -moz-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -o-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#responsive-menu-pro-container.push-left,
#responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(-800px, 0, 0);
    -moz-transform: translate3d(-800px, 0, 0);
    -ms-transform: translate3d(-800px, 0, 0);
    -o-transform: translate3d(-800px, 0, 0);
    transform: translate3d(-800px, 0, 0);
    -webkit-transform: translate(-800px, 0);
    -moz-transform: translate(-800px, 0);
    -ms-transform: translate(-800px, 0);
    -o-transform: translate(-800px, 0);
    transform: translate(-800px, 0);
}

.responsive-menu-pro-open #responsive-menu-pro-container.push-left,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-left {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); 
 }

Thank you for your time & interest!

How to fix jerky, frame-skipping CSS3 :hover transition of transform property in Chrome? Works in all other browsers

Just add the perspective also to the base (unhovered) element.

corrected fiddle

Added CSS:

.shot {
    -webkit-transform: perspective(600px);
}

The problem is that the perspective in the base element is undefined; different browsers can handle this in different ways.

CSS scale animation jerky in Chrome

It appears this bug has something to do with Chrome 49 and is fixed if you upgrade to Chrome 50.

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

I found the "culprit".

I am using another codepen in my website's header :

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
  %span
    PURE CSS
  %br
  %span
    PARALLAX PIXEL STARS

Removing it makes the other animation smooth.

---

NONETHELESS:

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

Is Chrome less powerful ?

I filed a report to Chrome and hope they will answer here but there is no guarantee.

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

UPDATE 6:

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

Why is my simple CSS transition animation jerky on smartphones?

It sounds more like of a performance issue due to the fact that you're not using transforms.

Has mentioned in A Tale of Animation Performance by Chris Coyier

It has become common generic advice that using translate() to move
elements has better performance than using top/right/bottom/left.

[...]Paul talked to another Paul on the Chrome Team, Paul Lewis, who agreed
that it is "smarter to use translate() for design-y motion." But went
on to say that there is more to this than frame rate. With
translate(), you get sub-pixel animation which is a kind of blurring
between pixels that usually leads to smoother animation

You can also read this great article about All you need to know about CSS Transitions:

Hardware acceleration
Transitioning certain properties, such as left
and margin causes the browser to recalculating styles every frame.
This is fairly expensive, and can lead to unnecessary re-paints,
especially if you have a lot of elements on the screen. This is
especially noticeable in less powerful devices, such as mobiles.

This solution is to offload the rendering to the GPU using CSS
transformations. In simple terms, this turns the element into an image
during the transition, avoiding any style recalculations which greatly
increases performance.

So in your case I would change your whole classes that are a bit of a mess in all due respect to a simple animation like:

@keyframes buttonInOutAnimation{
    0%{transform:translateX(-280px);}
    50%{transform:translateX(280px);}
    100%{transform:translateX(-280px);}
}

Then you can assign this animation to your button class like so:

.YourClassToAnimate{
    animation: buttonInOutAnimation 1s ease-in-out 0s 1;
}

Then you can assign this class with jquery like you've been doing already.

One last thing:
In your case you need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards; 

forwards leaves the animation in the state of the last frame.

backwards leaves the animation at the start

Having problems with CSS transform:scale or CSS transition in Chrome, Safari, Opera but fine in Firefox

This appears to be a duplicate of the question here: Webkit border-radius and overflow bug when using any animation/transition

Created a fiddle using the second answer to that question (added the CSS recommendation in that answer to the .picCircle rule): http://jsfiddle.net/nnvhacLe/1/

NOTE: in the fiddle, I also removed display: inline-block from the img.grow:hover rule.

How to remove jerky movement on chrome

Since I can't reproduce the issue on Chrome I think you could try to improve the overall performance by both using the transform property to move the cursor (instead of top and left properties) and the will-change property.

Since you are already using that property for the pulse animation I've inserted a a wrapper element and I've applied the transform there

const cursorW = document.querySelector('.cursor-wrapper');

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {

   cursorW.setAttribute("style", 

        "transform: translate("+(e.pageX - 10)+"px, "+(e.pageY - 10)+"px)")

})

document.addEventListener('click', () => {

   cursor.classList.add("expand");

   setTimeout(() => {

      cursor.classList.remove("expand");

   }, 500)

})

body {

    margin: 0;

    height: 100vh;

    //cursor: none;

    background: rgb(27, 27, 27);

}

.cursor-wrapper {

  will-change: transform;

  transition: transform .25s 0s;

}

.cursor {

    width: 20px;

    height: 20px;

    border: 1px solid #FAB313;;

    border-radius: 50%;

    position: absolute;

    transition-duration: 200ms;

    transition-timing-function: ease-out;

    animation: cursorAnim .5s infinite alternate;

    pointer-events: none;

}

.cursor::after {

    content: "";

    width: 20px;

    height: 20px;

    position: absolute;

    border: 8px solid #FAB313;;

    border-radius: 50%;

    opacity: .5;

    top: -8px;

    left: -8px;

    animation: cursorAnim2 .5s infinite alternate;

}

@keyframes cursorAnim {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(.7);

    }

}

@keyframes cursorAnim2 {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(.4);

    }

}

@keyframes cursorAnim3 {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(3);

    }

    100% {

        transform: scale(1);

        opacity: 0;

    }

}

.expand {

    animation: cursorAnim3 .5s forwards;

    border: 1px solid #1E2648;

}

<div class="cursor-wrapper">

  <div class="cursor"></div>

</div>

---

Related Topics