标签：es2017 forward round back utf-8 otto alt height rds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: black;
}
#img1{
width: 300px;
height: 230px;
position: absolute;
left: 50%;
margin-left: -150px;
transform: scale(0,0);
animation: img1Animation 3s forwards;
animation-delay: 3s;
}
#img2{
width: 15px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -7px;
bottom: 0;
animation: img2Animation;
animation-duration: 3s ;
/*animation-delay: 3s;*/
animation-fill-mode: forwards;
}
@keyframes img2Animation {
0%{
bottom: 0;
left: 50%;
margin-left: 7px;
}
99%{
bottom: 540px;
transform: scale(0.5,0.5);
}
100%{
transform: scale(0,0);
}
}
@keyframes img1Animation {
1%{
transform: scale(0.5,0.5);
opacity:0.1;
}
99%{
transform: scale(1,1);
opacity: 1;
}
100%{
transform: scale(0,0);
}
}
</style>
</head>
<body>
<img id="img1" src="../img/yanhua1.png" >
<img id="img2" src="../img/yanhua2.png" >
</body>
</html>
标签：es2017 forward round back utf-8 otto alt height rds
原文地址：http://www.cnblogs.com/ronghtp/p/7649950.html
