Transition from animation

An example with transform:rotate.

by Bar Hatsor

HTML

<div>
				<p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi.</p><p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi.</p><p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi.</p><p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi.</p><p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi.</p><p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di
quosam necatatiost pro voluptam quae...

CSS

.scrolling {
  animation: rotate 0.5s infinite;
}

@keyframes rotate {
  from, to {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }
}

body {
    font-family: Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 2vw;
    line-height: 2vw;
    height: 300vh;
    transition: transform 0.5s;
}

div {
  position: fixed;
  }

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    $('body').addClass('scrolling');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      var computedStyle = $('body').css('transform');
      $('body').removeClass('scrolling');
      $('body').css('transform', computedStyle);
      setTimeout(function() {
        $('body').css('transform', "rotateY(0deg)");
      }, 500);
    }));
  });
});