title: Separate easing for Reveal and Hide action
body: <p>I have a div (#photographerInfo) with position:fixed that is revealed when a button is clicked. A javascript sets a class on the div that animates it in onto the viewport. When the fullscreen mode is exited, the class is removed.</p>
  
  <pre><code>function openFullscreen(){       
      $('#photographerInfo').addClass('showfullscreen');
  }
  
  function removeFullscreen(){         
      $('#photographerInfo').removeClass('showfullscreen');
  }
  </code></pre>
  
  <p>on #photographerInfo: </p>
  
  <pre><code>#photographerInfo{
      animation-delay: 2s;
      transition: all 400ms ease-out;
      right: 0px;
      position:fixed;
  }
  
  #photographerInfo.showfullscreen {
      right:30px;
  }
  </code></pre>
  
  <p>This is all fine and dandy, but when I remove the class to hide the div, I would like to have easeIn instead of easeOut.</p>
  
  <p>How can this be accomplished?
  Thank you</p>