Css3 animation effects: Create an animation effect on win8 by using css3, and use css3win8

Css3 animation effects: Create an animation effect on win8 by using css3, and use css3win8
The complete effect of Windows 8 is shown in figure; this may be css conflicts. If you like it, you can set your own signs. css special effect code:

<style type="text/css">.hnyei{margin: 0 auto; width:600px; height:400px; background-color: #90da15; }.wrapp{position: absolute;    top: 25%;    left: 50%;    width: 600px;    height: 300px;    margin: -150px 0 0 -300px;    -webkit-perspective: 30px;    -webkit-transform: translateX(0px);    -webkit-animation: wrapp 400ms 800ms ease-in forwards;    -moz-perspective: 30px;    -moz-transform: translateX(0px);    -moz-animation: wrapp 400ms 800ms ease-in forwards;    -ms-perspective: 30px;    -ms-transform: translateX(0px);    -ms-animation: wrapp 400ms 800ms ease-in forwards;    perspective: 30px;    transform: translateX(0px);    animation: wrapp 400ms 800ms ease-in forwards;}.text{    position: absolute;top: 50%;left: 50%;width: 0px;height: 60px;    margin: -30px 0 0 -160px;overflow: hidden;    -webkit-transform: translateX(0px);    -webkit-animation: text 400ms 800ms linear forwards;    -moz-transform: translateX(0px);    -moz-animation: text 400ms 800ms linear forwards;    -ms-transform: translateX(0px);    -ms-animation: text 400ms 800ms linear forwards;    transform: translateX(0px);    animation: text 400ms 800ms linear forwards;}h1{float: right;font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;    font-weight: normal;color: #fff;padding: 0;margin: 0;width: 320px;height: 60px;font-size: 60px;line-height: 60px;}.logo{position: absolute;    top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px;    background-color: #fff;    -webkit-transform: translateX(0px) rotateY(10deg);    -webkit-animation: logo 500ms 300ms ease-out forwards;    -moz-transform: translateX(0px) rotateY(10deg);    -moz-animation: logo 500ms 300ms ease-out forwards;    -ms-transform: translateX(0px) rotateY(10deg);    -ms-animation: logo 500ms 300ms ease-out forwards;    transform: translateX(0px) rotateY(10deg);    animation: logo 500ms 300ms ease-out forwards;}.logo .top-left{position: absolute;top: 0;left: 0;width: 44px;height: 44px;border-right: solid 2px #90da15;border-bottom: solid 2px #90da15;}.logo .bottom-right{position: absolute;    bottom: 0;    right: 0;    width: 44px;    height: 44px;    border-left: solid 2px #90da15;    border-top: solid 2px #90da15;}@-webkit-keyframes logo {    from {-webkit-transform:  translateX(0px) rotateY(10deg);}    to {-webkit-transform:  translateX(0px) rotateY(-10deg);}}@-webkit-keyframes text {    from {width: 0px;-webkit-transform: translateX(0px);}    60%{width: 0px;}    to {width: 320px;-webkit-transform: translateX(240px);}}@-webkit-keyframes wrapp {    from {-webkit-transform: translateX(0px);}    to {-webkit-transform: translateX(-200px);}}@-moz-keyframes logo {    from {-moz-transform:  translateX(0px) rotateY(10deg);}    to {-moz-transform:  translateX(0px) rotateY(-10deg);}}@-moz-keyframes text {    from {width: 0px;-moz-transform: translateX(0px);}    60%{width: 0px;}    to {width: 320px;-moz-transform: translateX(240px);}}@-moz-keyframes wrapp {    from {-moz-transform: translateX(0px);}    to {-moz-transform: translateX(-200px);}}@-ms-keyframes logo {    from {-ms-transform:  translateX(0px) rotateY(10deg);}    to {-ms-transform:  translateX(0px) rotateY(-10deg);}}@-ms-keyframes text {    from {width: 0px;-ms-transform: translateX(0px);}    60%{width: 0px;}    to {width: 320px;-ms-transform: translateX(240px);}}@-ms-keyframes wrapp {    from {-ms-transform: translateX(0px);}    to {-ms-transform: translateX(-200px);}}@keyframes logo {    from {transform:  translateX(0px) rotateY(10deg);}    to {transform:  translateX(0px) rotateY(-10deg);}}@keyframes text {    from {width: 0px;transform: translateX(0px);}    60%{width: 0px;}    to {width: 320px;transform: translateX(240px);}}@keyframes wrapp {    from {transform: translateX(0px);}    to {transform: translateX(-200px);}}</style>

Html section:

<div class="hnyei">    <div class="wrapp">        <div class="text">