css3动画效果--过渡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.abc{}
.hou {
width: 200px;
height:200px;
margin: 100px auto;
background-color:#F9F;
border-radius:200px;
-webkit-animation:scaleout 6.0s infinite ease-in-out;
animation: scaleout 6.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0,0) ;opacity: 0;}
50% {
-webkit-transform: scale(1,1);
opacity:1;
}
100% {
-webkit-transform: scale(0,0);
opacity: 0;
}
}
@keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50%{
-webkit-transform: scale(1,1);
transform: scale(1,1);
opacity:1;
}
100% {
transform: scale(0,0);
-webkit-transform: scale(0,0);
opacity:0;
}
}
</style>
</head>
<body>
<div class="hou"></div>
</body>
</html>
本文出自 “前端开发” 博客，请务必保留此出处http://maobin.blog.51cto.com/6335599/1576087
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
