使用css3的动画配合js实现

.p{
            height: 200px;
            width: 200px;
            visibility: hidden;
        }
        @keyframes myfirst
        {
            0% {
                /*visibility: hidden;*/
                background: rgba(255,0,0,0);
            }
            25%{
                background: rgba(50,0,0,.2);
            }
            50%{
                background: rgba(100,0,0,.4);
            }
            75%{
                background: rgba(150,0,0,.8);
            }
            100% {
                visibility: visible;
                background: rgba(255,0,0,1);
            }
        }
        .p{
            animation-name:myfirst;
            animation-duration:4s;
            animation-delay: 2s;
            animation-iteration-count:1;
            animation-fill-mode : forwards;
        }

visibility 实现渐变和dispaly实现渐变，道理其实是一样的。
display:none-->display:block;opacity:0;-->opacity:1;
visibity:hidden;-->visibity:visible;opacity:0;-->opacity:1;