CSS width animation with high performance

by Julien Roche

HTML

<h1>Animate on width property</h1>
<section class="wrapper">
  <div class="item item--left"></div>
  <div class="item item--center item--animate-width"></div>
  <div class="item item--right"></div>
</section>

<br />
<hr />
<br />

<h1>Animate on transform property</h1>
<section class="wrapper">
  <div class="item item--left"></div>
  <div class="item item--center item--animate-transform"></div>
  <div class="item item--right item--animate-translate"></div>
</section>

CSS

.wrapper {
  display: flex;
}

.item {
  height: 2rem;
  line-height: 2rem;
  overflow: hidden;
  text-align: center;
  width: 3rem;
}

.item--animate-width {
  animation-duration: 3s;
  animation-name: animateWith;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

.item--animate-transform {
  animation-duration: 3s;
  animation-name: animateTransform;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

.item--animate-translate {
  animation-duration: 3s;
  animation-name: animateTranslate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

.item--center {
  background-color: yellow;
  width: 250px;
}

.item--left {
  background-color: red;
  color: white;
}

.item--right {
  background-color: green;
  color: white;
}

@keyframes animateWith {  
  100% {
    width: 0px;
  }
}

@keyframes animateTransform {  
  0% {
    transform: translateX(0px) scaleX(1);
  }
  
  100% {
    transform: translateX(-125px) scaleX(0);
  }
}

@keyframes animateTranslate {  
  0% {
    transform: translateX(0px);
  }
  
  100% {
    transform: translateX(-250px);
  }
}