<div>脚本之家</div>

<div>

<span>https://www.jb51.net</span>

</div>

<p>acss3animationdemo</p>

css3

@importurl('https://fonts.googleapis.com/css?family=Roboto:300');

body{

text-align:center;

background:linear-gradient(141deg,#ccc25%,#eee40%,#ddd55%);

color:#555;

font-family:'Roboto';

font-weight:300;

font-size:32px;

padding-top:40vh;

height:100vh;

overflow:hidden;

-webkit-backface-visibility:hidden;

-webkit-perspective:1000;

-webkit-transform:translate3d(0,0,0);

}

div{

display:inline-block;

overflow:hidden;

white-space:nowrap;

}

div:first-of-type{/*Forincreasingperformance

ID/Classshould'vebeenused.

Forasmalldemo

it'sokaishfornow*/

animation:showup7sinfinite;

}

div:last-of-type{

width:0px;

animation:reveal7sinfinite;

}

div:last-of-typespan{

margin-left:-355px;

animation:slidein7sinfinite;

}

@keyframesshowup{

0%{opacity:0;}

20%{opacity:1;}

80%{opacity:1;}

100%{opacity:0;}

}

@keyframesslidein{

0%{margin-left:-800px;}

20%{margin-left:-800px;}

35%{margin-left:0px;}

100%{margin-left:0px;}

}

@keyframesreveal{

0%{opacity:0;width:0px;}

20%{opacity:1;width:0px;}

30%{width:355px;}

80%{opacity:1;}

100%{opacity:0;width:355px;}

}

p{

font-size:12px;

color:#999;

margin-top:200px;

}