How to make css disappear gradually

Css method to gradually disappear: first define the animation using the "@keyframes" rule and animation attributes; then add the "opacity:1;" style to the beginning of the animation to set the normal state; finally add the "opacity:1;" style to the end of the animation "opacity:0;" style sets the fully transparent state and hides the element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

.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; } }

Recommended learning:css video tutorial

The above is the detailed content of How to make css disappear gradually. For more information, please follow other related articles on the PHP Chinese website!