CSS3 animation effects: pure CSS3 Making win8 loading animation effects

Windows 8 CSS 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:

<Divclass= "Hnyei">    <Divclass= "Wrapp">        <Divclass= "text">            <H1>Windows 8</H1>        </Div>        <Divclass= "logo">            <spanclass= "Top-left"></span>            <spanclass= "Bottom-right"></span>        </Div>    </Div></Div>

CSS3 animation effects: pure CSS3 Making win8 loading animation effects