CSS3 animated Matte Text effects

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
&LT;TITLE&GT;CSS3 Animation Mask </title>
<style type=text/css>
/*base*/
HTML, body, Div, span, applet, object, IFRAME,
H1, H2, H3, H4, H5, H6, p, blockquote, Pre,
A, ABBR, acronym, address, big, cite, code,
Del, DFN, EM, Font, IMG, ins, KBD, Q, S, Samp,
Small, strike, strong, sub, SUP, TT, VAR,
b, u, I, center,
DL, DT, DD, OL, UL, Li,
FieldSet, form, label, legend,
Table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
Vertical-align:baseline;
Background:transparent;
}
Body {
Line-height:normal;
font-family: ' Microsoft yahei ', Tahoma,arial,helvetica,simsun,stheiti;
Word-break:normal;
}

OL, UL, li{
List-style:none;
}
BLOCKQUOTE, Q {
Quotes:none;
}
Blockquote:before, Blockquote:after, Q:before, Q:after {
Content: ";
Content:none;
}
pre{
White-space:pre-wrap;
}
/* Remember to define focus styles! */
: Focus {
outline:0;
}
/* Remember to highlight inserts somehow! */
INS {
Text-decoration:none;
}
del {
Text-decoration:line-through;
}
/* Tables still need ' cellspacing= "0" ' in the markup * *
Table {
Border-collapse:collapse;
border-spacing:0;
}
. Clearfix:before,. Clearfix:after {
Content: ' \0020 ';
Display:block;
Overflow:hidden;
Visibility:hidden;
width:0;
height:0;
}
. clearfix:after {
Clear:both;
}
. clearfix {
Zoom:1;
}
H1{FONT-SIZE:16PX}
H2, h3{font-size:14px}
H4, H5, h6{font-size:12px}
SMALL{FONT-SIZE:11PX}
Input, option, textarea{font-family:arial;font-size:12px;}
. input-text{border:1px solid #888888;p adding:2px 3px;
/*HTML5 Layout reset*/
Article, aside, dialog, figure, footer, header,
Hgroup, nav, section, figcaption, details, summary {Display:block}

/*CSS3 Transform transition*/
Body {background: #999;}
H1 {margin:50px 50px 0 50px; height:50px; line-height:50px; font-size:28px; color: #000;}
UL {width:990px; margin:50px auto 0;}
Li {width:320px; height:200px; margin-bottom:20px; border:3px solid #ccc; box-shadow:0 0 1px #000; Display:inline-block; Overflow:hidden;}

/*auto------------------------------------------------------------------------------------*/
. Onedemo,. Twodemo,. Threedemo {width:320px; height:200px; position:relative; margin:0 Auto;}
. transform{height:200px; Overflow:hidden;}
. content {position:absolute; top:0; left:0; overflow:hidden;}
. content H3,. Content p {width:285px; margin:0 auto; text-align:center; overflow:hidden; color: #fff; text-shadow:1px 0 1px #000;}
. content H3 {height:30px; line-height:30px; font-size:16px;}
. content p {height:45px; line-height:22px; font-size:14px;}
. Content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}

/*onedemo--------------------------------------------------------------------------------*/
. Onedemo mask {position:absolute; top:0; left:0; display:block; width:360px; height:400px; opacity:1; Background:rgba ( 230, 230, 230, 0.5);}
. Onedemo. mask-top {right:0; left:auto;
-moz-transform:rotate (58.5deg) Translate ( -424px, -65px); -webkit-transform:rotate (58.5deg) translate ( -424px,-65px);
}
. Onedemo. mask-bottom {top:0; left:0;
-moz-transform:rotate (58.9deg) translate (253px,-45px); -webkit-transform:rotate (58.9deg) translate (253px,-45px);
}
. Onedemo. Mask-top,. Onedemo. mask-bottom {opactiy:1;
-moz-transition:all 0.3s ease-in-out 0.6s; -webkit-transition:all 0.3s ease-in-out 0.6s;
}
. onedemo:hover. mask-top {
-moz-transform:rotate (57.9deg) Translate ( -253px, -65px); -webkit-transform:rotate (57.9deg) translate ( -253px,-65px);
}
. onedemo:hover. Mask-bottom {
-moz-transform:rotate (57.9deg) Translate (85px, -31px); -webkit-transform:rotate (57.9deg) translate (85px,-31px);
}
. onedemo:hover. Mask-top,. Onedemo:hover. Mask-bottom,. Onedemo:hover. Content {
-moz-transition-delay:0.1s; -webkit-transition-delay:0.1s;
}
. Onedemo. Content {height:0; width:320px; Background:rgba (A., 0.8); color: #fff; font-size:14px;
-moz-transform:rotate ( -40deg) Translate ( -100px, 100px); -webkit-transform:rotate ( -40deg) Translate ( -100px, 100px);
-moz-transition:all 0.2s ease-in-out 0.3s; -webkit-transition:all 0.2s ease-in-out 0.3s;
}
. onedemo:hover. Content {width:280px; height:60px; margin-top:50px; padding:20px;
-moz-transform:rotate (0) translate (0); -webkit-transform:rotate (0) translate (0);
}

/*twodemo----------------------------------------------------------------------------------*/
. Twodemo. Content {height:200px; padding:0 20px; Position:absolute; top:0; left:0; Display:block; opacity:0; Background:rgba (130, 130, 130, 0.5);
-moz-transform:translate (460px, -100px) rotate (180deg); -webkit-transform:translate (460px, -100px) rotate (180deg);
-moz-transition:all 0.2s ease-in-out 0.4s; -webkit-transition:all 0.2s ease-in-out 0.4s;
opacity:0;
}
. twodemo:hover. content {opacity:1;
-moz-transform:translate (0) rotate (0); -webkit-transform:translate (0) rotate (0);
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
. Twodemo. Content H3 {margin:30px Auto 0; Background:rgba (, +, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translatey ( -100px); -webkit-transform:translatey ( -100px);
-moz-transition:all 0.2s ease-in-out 0s; -webkit-transtiton:all 0.2s ease-in-out 0s;
}
. Twodemo. content:hover h3 {
-moz-transform:translatey (0px); -webkit-transform:translatey (0px);
-moz-tarnsition-delay:0.5s; -webkit-transition-delay:0.5s;
}
. Twodemo. content p {text-align:center; margin-top:20px;
-moz-transform:translatex (300px) rotate (90deg); -webkit-transform:translatex (300px) rotate (90deg);
-moz-transition:all 0.4s ease-in-out 0s; -webkit-transition:all 0.4s ease-in-out 0s;
}
. Twodemo. content:hover p {-moz-transform:translatex (0) rotate (0);-webkit-transform:translatex (0) rotate (0);}
. Twodemo. Content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color: #fff; background:rgb A (110, 120, 110, 0.8); Text-decoration:none; line-height:30px; Text-align:center;
-moz-transform:translatex ( -300px) rotate ( -90deg); -webkit-transform:translatex ( -300px) rotate ( -90deg);
-moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s;
}
. Twodemo. Content:hover a {-moz-transform:translatex (0) rotate (0);-webkit-transform:translatex (0) rotate (0);

/*threedemo----------------------------------------------------------*/
. Threedemo. transform {-moz-transition:all 1s ease-in 0.1s;-webkit-transition:all 1s ease-in 0.1s;}
. threedemo:hover. Transform {-moz-transform:rotate (720deg) scale (0),-webkit-transform:rotate (720deg) scale (0);}
. Threedemo. Content {height:200px; padding:0 20px; top:-200px; Opactiy:0;background-color:rgba (200, 200, 200, 0.5);
-moz-transition:all 0.3s ease-out 0.5s; -webkit-transition:all 0.3s ease-out 0.5s;
}
. threedemo:hover. Content {top:0; opactiy:1;
-moz-animation:0.9s linear 0s normal none 1 bouncey; -webkit-animation:0.9s linear 0s normal none 1 bouncey;
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
. Threedemo. Content H3 {margin:30px Auto 0; Background:rgba (, +, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translatey ( -200px); -webkit-transform:translatey ( -200px);
-moz-transition:all 0.6s ease-in-out 0.1s; -webkit-transition:all 0.6s ease-in-out 0.1s;
}
. Threedemo. content:hover h3 {
-moz-transform:translatey (0); -webkit-transform:translatey (0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
. Threedemo. content p {margin-top:20px;
-moz-transform:translatey ( -200px); -webkit-transform:translatey ( -200px);
-moz-transition:all 0.4s ease-in-out 0.1s; -webkit-transition:all 0.4s ease-in-out 0.1s;
}
. Threedemo. content:hover p {
-moz-transform:translatey (0); -webkit-transform:translatey (0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
. Threedemo. Content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color: #fff; background:r GBA (110, 120, 110, 0.8); Text-decoration:none; line-height:30px; Text-align:center;
-moz-transform:translatey ( -200px); -webkit-transform:translatey ( -200px);
-moz-transition:all 0.2s ease-in-out 0.1s; -webkit-transition:all 0.2s ease-in-out 0.1s;
}
. Threedemo. Content:hover a {
-moz-transform:translatey (0); -webkit-transform:translatey (0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
@-moz-keyframes Bouncey {
0% {-moz-transform:translatey ( -200px);}
40% {-moz-transform:translatey ( -180px);}
65% {-moz-transform:translatey ( -102px);}
82% {-moz-transform:translatey ( -75px);}
92% {-moz-transform:translatey ( -32px);}
55%, 75%, 87%, 97%, 100% {-moz-transform:translatey (0px);}
}
@-webkit-keyframes Bouncey {
0% {-webkit-transform:translatey ( -200px);}
40% {-webkit-transform:translatey ( -180px);}
65% {-webkit-transform:translatey ( -102px);}
82% {-webkit-transform:translatey ( -75px);}
92% {-webkit-transform:translatey ( -32px);}
55%, 75%, 87%, 97%, 100% {-webkit-transform:translatey (0px);}
}
</style>
<body>
<div>http://www.999jiujiu.com/</div>

<ul>
<li>
<div class= "Onedemo" >

<div class= "Mask mask-top" ></div>
<div class= "Mask Mask-bottom" ></div>
<div class= "Content" >

<p> content Display content display content display content display content display content display content display contents display content display </p>
</div>
</div>
</li>
<li>
<div class= "Twodemo" >

<div class= "Content" >

<p> content Display content display content content display content display content display content display contents display content displays content display contents. </p>
<a href= "#" >MR right</a>
</div>
</div>
</li>
<li>

<div class= "Threedemo" >

<div class= "Content" >
<p> content Display content display content display content display content display content display content display contents display content display </p>
<a href= "#" >EURO</a>
</div>

</div>
</li>
</ul>
</body>

CSS3 animated Matte Text effects