简单的网页使用CSS和HTML淡出效果

Question

下面有一个非常简单的方法，当访问者到达网站时，使用CSS会在网页中淡入淡出。但是，当访问者离开另一个站点时，页面突然消失，而不是在离开之前平滑淡出。

  

问题：

     

如何使用CSS修改下面的代码来实现简单   当访客离开页面时淡出效果？

CSS：

@keyframes fade { 
     0% {opacity: 0;} 
     100% {opacity: 1;} 
}
@-webkit-keyframes fade { 
     0% {opacity: 0;} 
     100% {opacity: 1;} 
}
@-moz-keyframes fade { 
     0% {opacity: 0;} 
     100% {opacity: 1;} 
}
@-o-keyframes fade { 
     0% {opacity: 0;} 
     100% {opacity: 1;} 
}

html {
    opacity: 0;
    animation: fade 3s ease-in-out 1.5s forwards;
    -webkit-animation: fade 3s ease-in-out 1.5s forwards;
    -moz-animation: fade 3s ease-in-out 1.5s forwards;
    -o-animation: fade 3s ease-in-out 1.5s forwards;
}