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

Question

I'm trying to animate a box on hover, using transform and transition together. The main idea is to have an upside down text (not readable) and when the mouse goes over on each box, the text will transform to normal (readable) on that specific box.

New fiddle edited:

https://jsfiddle.net/mt3x1phq/

I have got the effect with css. If you move the mouse over quickly, you can see the effect, but if you move the mouse slowly, the box begins to "shake".

My question is: How can I avoid this "shake" effect?

This is the css code I'm using:

.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-container:hover {
  transform: scale(1.05);
}

Answer 1

.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>

Consider this code snippet.

   .card-list{
       height: 143px;
    }
    .card-list:hover .card-container {
      transform: scale(1.05);
    }

The mouse moves away from the DOM when zooming ,.card-container

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr 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-container:hover {
  transform: scale(1.05);
} */

.card-container-wrap:hover .card-container {
  transform: scale(1.05);
}

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

Add a layer of DOM outside the .card-container, The DOM of :hover is not zoomed