Win8 Animations

by djarekg

HTML

<p>hello world</p>
<div id="div1">
    <div id="div2"></div>
</div>

CSS

html{
  height: 100%; 
  overflow-y: scroll;
  overflow-x: hidden;
}
body{
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#div1 {
    /*width: 100px;
    height: 100px;
    position: relative;*/
    background-size:cover;
    padding:4em .5em; 
    width:100%; 
    perspective:3300px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #eee;
}

#div2 {
    width: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transform-origin: 100% 0%;
    transform: rotate(-90deg) translate(0);
}

.open-page { 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}

.hide-page {
  opacity:1;
  transform: rotateY(0) translateZ(0) ; 
  animation:slidePageLeft .8s ease-out 1 normal forwards;
}
@keyframes slidePageLeft{
  0%{left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}
  70%{opacity:1;}
  100%{opacity:0; left:-150%; transform: rotateY(0deg)}
}

@keyframes rotatePageInFromRight{
  0% {transform:rotateY(-90deg) translateZ(0);opacity:0}
  30% {opacity:1}
  100% {transform: rotateY(0deg) translateZ(0); opacity:1}
}

JavaScript

$("#div2").addClass("hide-page");