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!