css逐渐消失,css如何实现渐渐消失

css实现渐渐消失的方法：首先用“@keyframes”规则和animation属性定义动画；然后在动画开始部分添加“opacity:1;”样式，设置正常状态；最后在动画结束部分添加“opacity:0;”样式，设置完全透明状态，隐藏元素。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。.hideSlow{

background: #a40808;

color: #fff;

animation: hidetip 5s 1;

animation-fill-mode: forwards;

-webkit-animation: showtip 5s 1;

-webkit-animation-fill-mode: forwards;

}

@keyframes hidetip {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

@-webkit-keyframes hidetip {

from {

opacity: 1;

}

to {

opacity: 0;

}

}