CSS不能淡出然后隐藏

添加 animation-fill-mode: forwards; 使正在设置动画的元素保持在最后一个(关键点) 框架 ,它不会重新开始,也不会刷新到开始。

了解更多关于 animation-fill-mode .

编写此动画的另一种方法:

.hide {
  animation: fadeOut 1s forwards;
}

.hide {
    animation-name:fadeOut;
    animation-duration:1s;
    animation-fill-mode: forwards; /* added */
    /*visibility: hidden;
    display: none;*/
}

@keyframes fadeOut {
    from {
        opacity: 1;
        margin-left: 0%;
    }

    to {
        opacity: 0;
        margin-left: -100%;
        height: 0; /* added */
    }
}

<div class="hide">
  <div style="padding:20px;background:orange;">
    <div style="padding:5px;background:azure;">
      My content
    </div>
  </div>
</div>

   <div>
 Other content
   </div>

滚动条修复

解决这个问题的可能办法 滚动条问题 就是用 margin: 0; (或无论初始保证金是多少):

@keyframes fadeOut {
    0% {
        opacity: 1;
        margin-left: 0%;
    }

    99% {
        opacity: 0;
        margin-left: -100%;
        height: 0;
    }
    100% {
        opacity: 0;
        margin-left: 0; /* added */
        height: 0;
    }
}