为什么只有第一放大的动画效果-慕课网

为什么只有第一放大的动画效果

来源：-

xunzhonglee

2015-03-04 15:07

<!DOCTYPE html>
<html>
<head lang="en">
<title>SI产品溯源</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
<link rel="stylesheet" href="css/animate.min.css" type="text/css"/>
<style type="text/css">
*{margin: 0px;padding: 0px}
body{
width: 100%;
height: 100%;
}
#one{
background:-webkit-gradient(linear, 0 0, 0 100%, from(#004c57), to(#26b8a3));
width: 100%;
height: 100%;
position: absolute;

perspective:800px;

}
#one a{
display: block;
position: relative;
}
#one img{
-webkit-animation-duration: 2s;
-webkit-transform: translate3d(0,0,15px);
-webkit-perspective: 3000px;
display:block;
width: 98%;

margin-top: 40%;
margin-left: -2%;
}
p{
text-align: center;
width: 90%;

left: 7%;
bottom: 10%;
position: absolute;

color: #b2dc88;
font-weight: lighter;
font-family:fantasy;
font-size: 10px;

transform-style: preserve-3d;
}
p span{
opacity: 0;
}

p span:nth-of-type(1){

animation: myAnimation 800ms ease-in-out 800ms;
-webkit-animation:myAnimation 800ms ease-in-out 800ms ;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}

p span:nth-of-type(2){
animation: myAnimation 800ms ease-in-out 1100ms;
-webkit-animation:myAnimation 800ms ease-in-out 1100ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(3){
animation: myAnimation 300ms ease-in-out 1400ms;
-webkit-animation:myAnimation 300ms ease-in-out 1400ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(4){
animation: myAnimation 300ms ease-in-out 1700ms;
-webkit-animation:myAnimation 300ms ease-in-out 1700ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(5){
animation: myAnimation 300ms ease-in-out 2000ms;
-webkit-animation:myAnimation 300ms ease-in-out 2000ms ;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(6){
animation: myAnimation 300ms ease-in-out 2300ms;
-webkit-animation:myAnimation 300ms ease-in-out 2300ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(7){
animation: myAnimation 300ms ease-in-out 2600ms;
-webkit-animation:myAnimation 300ms ease-in-out 2600ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(8){
/* animation: myAnimation 300ms ease-in-out 2900ms;*/
animation: myAnimation 1000ms ease-in-out 2900ms;
-webkit-animation:myAnimation 1000ms ease-in-out 2900ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;

}
p span:nth-of-type(9){
/* animation: myAnimation 300ms ease-in-out 3200ms;*/
animation: myAnimation 1000ms ease-in-out 3900;
-webkit-animation:myAnimation 1000ms ease-in-out 3900ms;

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@keyframes myAnimation {
0% { opacity: 0;transform:scale(4,4);}
100% {opacity: 1;transform:scale(1,1);}
}
@-webkit-keyframes myAnimation {
0% { opacity: 0;-webkit-transform:scale(4,4);}
100% {opacity: 1;-webkit-transform:scale(1,1);}
}

</style>
</head>
<body>
<div id="one">
<a href="index2-2.html"><img src="image/LOGO1.svg" alt="logo" class="animated bounceIn"/>
<p><span>您</span><span>正</span><span>在</span><span>关</span><span>注</span><span>食</span><span>品</span><span>安</span><span>全</span></p>
</a>

</div>
</body>
<script>
</script>
</html>