Question

我想点击一个按钮，就会调用动画，实现提示信息渐显并渐退的效果，但我不知道按钮的JS函数应该怎么写。

我的CSS代码是这样的。
.spanTiShi{
padding: 15px 20px;
border-radius: 30px;
background: #666666;
color: #FFFFFF;
white-space: nowrap;

position:absolute;
bottom: 60px;
left: 50%;

animation: showTiShi 4s;
-moz-animation: showTiShi 4s;
-webkit-animation: showTiShi 4s;
-o-animation: showTiShi 4s;
animation-timing-function:ease;
}
@keyframes showTiShi{
10% {filter:alpha(opacity=0); opacity:0;}
20% {filter:alpha(opacity=100); opacity:1;}
90% {filter:alpha(opacity=100); opacity:1;}
100% {filter:alpha(opacity=0); opacity:0;}
}

@-moz-keyframes showTiShi{ /* Firefox */
10% {filter:alpha(opacity=0); opacity:0;}
20% {filter:alpha(opacity=100); opacity:1;}
90% {filter:alpha(opacity=100); opacity:1;}
100% {filter:alpha(opacity=0); opacity:0;}
}

@-webkit-keyframes showTiShi{ /* Safari 和 Chrome */
10% {filter:alpha(opacity=0); opacity:0;}
20% {filter:alpha(opacity=100); opacity:1;}
90% {filter:alpha(opacity=100); opacity:1;}
100% {filter:alpha(opacity=0); opacity:0;}
}

@-o-keyframes showTiShi{ /* Opera */
10% {filter:alpha(opacity=0); opacity:0;}
20% {filter:alpha(opacity=100); opacity:1;}
90% {filter:alpha(opacity=100); opacity:1;}
100% {filter:alpha(opacity=0); opacity:0;}
}

若以下回答无法解决问题，邀请你更新回答

Answer 1

额，jquery自带淡入淡出效果，我建议你用jq来实现此效果。而且兼容性也很好。
详情你可以搜索jquery的fadeToggle()这个方法的具体用法