{
from {opacity: 1}
to {opacity: 0}
}
.anim-welcome
{
animation: anim 3s
}
执行时,为需要淡出的节点添加样式anim-welcome,兼容其他浏览器请自查;
该法为css3实现,不管如何兼容IE9-是无效的,全兼容需脚本支持:
$('#node').fadeout()
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
*{ padding:0margin:0font-size:12px }
.open{ width:100pxheight:100pxtext-align:centerline-height:100pxbackground-color:pinkcolor:#000border-radius:50%margin:50px autobox-shadow:0 0 10px,0 0 10px #ff0000 }
.fade{
animation:fade 2s infinite -webkit-animation:fade 2s infinite
-moz-animation:fade 2s infinite-o-animation:fade 2s infinite-ms-animation:fade 2s infinite
animation-fill-mode:both
}
@keyframes fade{
0%,100%{
opacity:0transform:scale(0)
}
50%{
opacity:1transform:scale(1)
}
}
</style>
</head>
<body>
<div class="open fade"> Test </div>
</body>
</html>