<!DOCTYPE HTML>
<html>
<head>
<title>动画</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
div
{
border:1px solid black;
200px;
height:100px;
position:relative;
}
div img
{
position:absolute;
}
#step_2,#step_3
{
visibility:hidden;
z-index:10;
}
/*定义动画*/
@keyframes jump
{
from { left:5px; top:0px; }
10% { left:15px; top:15px; }
15% { left:15px; top:35px; }
20% { left:15px; top:55px; }
25% { left:15px; top:75px; }
30% { left:20px; top:85px; }
35% { left:20px; top:75px; }
40% { left:20px; top:55px; }
45% { left:20px; top:35px; }
50% { left:30px; top:25px; }
55% { left:30px; top:35px; }
60% { left:40px; top:25px;transform:scale(0.5); }
70% { left:40px; top:40px; transform:scale(0.4);}
80% { left:40px; top:50px;transform:scale(0.3); }
90% { left:50px; top:70px;transform:scale(0.2); }
to { left:50px; top:35px;transform:scale(0.1); }
}
@keyframes image_show
{
from { left:40px; top:25px;visibility:visible;opacity:0.2;transform:scale(0.5);}
50% { opacity:0.5;}
70% {left:40px; top:25px;visibility:visible;opacity:1;transform:scale(1);}
to {left:40px; top:25px;visibility:visible;opacity:0;}
}
@keyframes image_end
{
from { left:40px; top:25px;visibility:visible;opacity:0.2;}
50% { left:40px; top:25px;opacity:0.5;}
to {left:40px; top:25px;visibility:visible;z-index:20;opacity:1;}
}
/*触发动画*/
img
{
animation:jump 2s;
animation-fill-mode : forwards;
}
#step_2
{
animation:image_show 1s linear 2s;
animation-fill-mode : forwards;
}
#step_3
{
animation:image_end 1s linear 3s;
animation-fill-mode : forwards;
}
</style>
</head>
<body>
<div>
<img src="images/cic.png" />
<img id="step_2" src="images/sf.png" />
<img id="step_3" src="images/red.png" />
</div>
</body>
</html>