title: How to apply custom animation effect @keyframes in MUI?
body: <p>I have learnt to use animation in CSS using <code>@keyframe</code>. I however want to write my custom animation code to my React project (using MUI). My challenge is how I can write the Javascript code to custom my animations using the <code>makeStyle()</code> in MUI.</p>
  <p>I want to be able to custom the transitions processes in percentages
  this time around in MUI. I need to be able to write codes like this in <code>makeStyle()</code> but I don't seem to know how to.</p>
  <pre class="lang-css prettyprint-override"><code>@keyframes myEffect {
   0%{
    opacity:0;
    transform: translateY(-200%); 
   }
  
  100% {
    opacity:1;
    transform: translateY(0);
   }
  }
  </code></pre>