CSS Transition Div Shaking

Css transition div shaking

It works fine for me, but if you find an element "shaking" (esp in Chrome), it's likely because of the translate function not working with the z-index correctly

If you need to fix it, you can use this code (lifesaver):

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

Css transition shaking

It shakes because you're animating from no box-shadow (0px) to a box-shadow (6px).

Personally I would use the border property over box-shadow in this situation. The main thing to do here is define the border/box-shadow ahead of time but don't display it. To do that you can set the color to transparent, then when you hover you set it to the color you want.

Here's some pseudo code of what to do:

header {  border-top: 5px solid purple;}ul,li {  margin: 0;  padding: 0;  list-style: none;}li {  float: left;  margin: -5px;  padding: 15px 25px;  border-top: 5px solid transparent;  transition: all 300ms ease-in-out;}li:hover {  border-top: 5px solid yellow;}

<header>  <nav>    <ul>      <li><a href="#">Link 1</a>      </li>      <li><a href="#">Link 2</a>      </li>    </ul>  </nav></header>

CSS animation is not smooth, it is shaking

The issue is related to the fact that you are centring the element so each size change will create the shake effect because you will trigger the centring.

Try a transform animation instead. It should be better:

.content {
  overflow: hidden;
  position: relative;
  width: 500px;
  height: 300px;
  border: 4px solid red;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mainimg {
  border: 3px solid black;
}

img {
  width: 100%;
  height: 100%;
  display:block;
}

/*zoom-out-to-zoom-in keyframe**/

.zoom-out-to-zoom-in {
  animation: zoom-out-to-zoom-in linear 8s;
  animation-direction: alternate;
  animation-iteration-count: 4;
}

@keyframes zoom-out-to-zoom-in {
  0% {
    transform:perspective(100px) translate3d(0,0,-80px);
  }
  5% {
    transform:perspective(100px) translate3d(0,0,-40px);
  }
  100% {
    transform:perspective(100px) translate3d(0,0,-10px);
  }
}

<div class="content">
  <div class="mainimg zoom-out-to-zoom-in">
    <img class="left-to-right" src="https://c.ndtvimg.com/2021-01/qt2601i8_pm-modi-davos_625x300_28_January_21.jpg">
  </div>
</div>

Image shaking on CSS div transition

Use the transform property instead of margin

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  transform:translate(-5px, -5px);
}

Make sure you have used all proper prefixes

.card:hover {
  box-shadow: 5px 5px 20px #c4c4c4;
  -webkit-transform:translate(-5px, -5px);
          transform:translate(-5px, -5px);
}

Sample https://jsfiddle.net/zudvv4cv/4/

Stop shaking in CSS animation

I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:

@keyframes grow-left {
    0% {
        transform: rotate(var(--winLineRotation)) scaleX(0);
    }

    100% {
        transform: rotate(var(--winLineRotation)) scaleX(100%);
    }
}

.winLine {
    position: absolute;
    width: 300%;
    height: var(--borderThickness);
    background-color: var(--textColor);
    border-radius: 1rem;
    transform-origin: center;
    z-index: 2;
    animation: grow-left 1s ease-in-out 0s;
    opacity: 1;
    transform: rotate(var(--winLineRotation));
}

Background is shaking in transition

I have optimized the code and considered the use of left/right to define the size of the element then changed the width transition with a translation.

section {  max-width: 1920px;  position: relative;  overflow: hidden;  height: 500px;}
.container {  position: absolute;  top: 0;  bottom:0;  transition:transform 1s linear;  overflow: hidden;  transform: skew(20deg);}
.left {  left: -60vw; /*to create the overflow*/  right: calc(55% + 10px); /*10px distance between both element*/  border-radius: 0 20px 20px 0;}
.right {  right: -80vw;  left: 45%; /*100% - 55% (the right value of .left)*/  border-radius: 20px 0 0 20px;}
.left::after,.right::after {  content: "";  position: absolute;  top: 0;  left: -40%;  bottom: 0;  right: -40%;  transform: skew(-20deg);  background-position: center;  background-repeat: no-repeat;  background-size: 100% 100%;  transition:transform 1s linear;}
.left::after {  background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);  transform-origin: bottom;}
.right::after {  transform-origin: top;  background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);}
.right:hover {  transform: skew(20deg) translateX(-60vw);}
.right:hover::after {  transform: skew(-20deg) translateX(60vw);}

<section>  <div class="container left"></div>  <div class="container right"></div></section>

How to avoid shake effect on hover when transition and transform are combined?

.card-list {  width: 50vw;  margin: 60px auto;  display: grid;  grid-template-columns: 1fr;  grid-gap: 60px;  text-align: center;}
.card-container {  display: flex;  flex-direction: column;  background-color: #95dada;  border: 1px solid grey;  border-radius: 5px;  padding: 25px;  cursor: pointer;  -moz-osx-font-smoothing: grayscale;  backface-visibility: hidden;  transform: scale(-1.05);  transition: transform 0.5s ease-in-out;}
.card-list:hover .card-container {  transform: scale(1.05);}

 <div class="card-list">      <div class="card-container">        <h1>          Hello World        </h1>      </div>    </div>

Elements child shakes when I increase the size with transition/animation

Animate transform rule:

section {  position: relative;  width: 100%;  height: 100%;}.test-ani {  position: absolute;  top: 50%;  left: 50%;  display: flex;  align-items: center;  justify-content: center;  width: 100px;  height: 100px;  border-radius: 50%;  background-color: cornflowerblue;  user-select: none;  cursor: pointer;}.test-ani:hover {  transition: transform .5s;  transform: scale(1.2);}.test-ani span {  color: #ffdb58;  font-size: 50px;  padding: 0;  margin: 0;}

<section>  <div class='test-ani'>     <span>+</span>  </div></section>

CSS shake/jitter bug in chrome? transition of width on centered div

It seems I found one solution.

Adding display: table; to the element that uses the transition property, seems to remove the shaking.

//jQuery to add sticky class when scrolling
$(window).scroll(function() {  if ($(this).scrollTop() > 1) {    $('.header').addClass("sticky");  } else {    $('.header').removeClass("sticky");  }
});

body {  height: 2000px;}
.header {  background: #335C7D;  margin: 0 auto;  width: 1000px;  transition: width .6s ease;  height: 200px;  display: table; /* this seems to fix it */}
.sticky {  position: fixed;  width: 100%;  left: 0;  right: 0;  will-change: width;}
.wrap {  width: 1000px;  margin: 0 auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="header">    <div class="wrap">      <img src="https://i.stack.imgur.com/iaYsc.png" />      <h1> Hello World.</h1>    </div>  </div></div>

---

Related Topics