為什么 只有第一放大的動畫效果
<!DOCTYPE html>
<html>
<head lang="en">
? ?<title>SI產(chǎn)品溯源</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>關(guān)</span><span>注</span><span>食</span><span>品</span><span>安</span><span>全</span></p>
? ?</a>
</div>
</body>
<script>
</script>
</html>
