<div class="wrap--main">
  <h1 class="intro__header">Perfomant CSS animation for beginners</h1>
  
  <div class="grid-r">
    <div class="grid-u-sm-1 grid-u-md-1-2">
      <div class="box"><img src="https://fillmurray.com/200/200" alt=""></div>
      <div class="btn__wrap">
        <button id="js-opacity" class="btn">Opacity</button>
        <button id="js-translate" class="btn btn-two">Translate</button>
        <button id="js-scale" class="btn btn-three">Scale</button>
        <button id="js-rotate" class="btn btn-four">Rotate</button>
      </div>
    </div>
    
    <div class="intro__wrap grid-u-sm-1 grid-u-md-1-2">
      <p class="intro__p">As a general rule, there are only four properties which you can animate whilst maintaining a silky smooth experience for your users. They are: Opacity, Translate, Scale & Rotation. You'll be surprised what you can achieve with only these parameters. Animating 'fixed' elements can result in a screen 're-paint' and a 'janky' transition.<br /> Here, I've chosen to use jQuery to toggle classes because it's eaiser for begininers to read, but I would recommend handling such simple animations with 'vanilla' Javascript. <br />
</p>

  <div class="code__wrap">
    <code><pre>

/* the box in its original state*/
.box {
  transition: all 300ms;
}

/* with opacity class */
.box.removeOpacity {
  opacity: 0;
}

/* with translate class */
.box.moveX {
  transform: translateX(100px);
}

/* with scale class */
.box.scale {
   transform: scale(0.4);
}

/* with rotate class */
.box.rotate {
  transform: rotate(45deg);
}

</pre></code>
  </div>


$bodyBg: #fff;
$codeBg: #cacaca;
$textPrimary: #333;
$btnActive: rgba(0,0,0,0.5);
$btnTwo: #2ecc71;
$btnThree: #e74c3c;
$btnFour: #2980b9;

body {
  background-color: $bodyBg;
  margin: 0 5rem;
}
  
.wrap--main {
  padding: 0 5rem;  
}

.intro__header {
  color: $textPrimary;
  font-family: 'Roboto Mono', monospace;
  font-size: 2.4rem;
  line-height: 1.3;
  margin: 1.8rem;
  padding: 3rem;
  text-align: center;
}

.intro__p {
  color: $textPrimary;
  font-size: 1.2rem;
  font-family: 'Roboto Mono', monospace;
  margin-bottom: 3rem;
}
 
.follow {
  font-weight: bold;
  &:hover {
    text-decoration: underline;
  }
}

.box {
  background-color: $textPrimary;
  background-image: url('https://www.fillmurray.com/500/500');
  height: 20rem;
  margin: 5rem auto;
  transition: all 300ms;
  width: 20rem;
  &.--opac {
    opacity: 0;
  }
  &.--move {
    transform: translateX(50vw);    
  }
  &.--scaled {
    transform: scale(0.4);
  }
  &.--turn {
    transform: rotate(45deg);
  }
}  
    
.btn__wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
  
.btn {
  color: $bodyBg;
  border: none;
  background-color: #9b59b6;
  cursor: pointer;
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
  margin: .25rem;
  padding: 1.5rem 0;
  width: 20rem;
  &.--active {
    background-color: $btnActive;
  } 
  &-two {
    background-color: $btnTwo;
  } 
  &-three {
    background-color: $btnThree;
  } 
  &-four {
    background-color: $btnFour;
  }
} 
    
.code__wrap {
  background-color: $codeBg;
  color: $textPrimary;
  font-size: 1.3rem;
  padding: 2rem;
}
View Compiled 
$('.btn').click(function(e){
    $(this).toggleClass('--active');
});

$('#js-opacity').click(function(e){
  e.preventDefault();
  $('.box').toggleClass('--opac');
});

$('#js-translate').click(function(e){
  e.preventDefault();
  $('.box').toggleClass('--move');
});

$('#js-scale').click(function(e){
  e.preventDefault();
  $('.box').toggleClass('--scaled');
});

$('#js-rotate').click(function(e){
  e.preventDefault();
  $('.box').toggleClass('--turn');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js