关键帧动画后网站交互被阻止

Question

我的css动画运行良好但是当动画完成时，我无法与我的网站上的锚点或其他交互进行交互......

hr{
    height: 5px;
    position: absolute;
    top:50%;
    margin: 0;
    padding: 0;
    background: black;
    z-index: 4;
    -webkit-animation: ligne 5s;
    -webkit-animation-fill-mode: forwards;
}

#background{
    z-index: 3;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    background-image: linear-gradient(white, #EFF0FF);
    -webkit-animation: fond 5s;
    -webkit-animation-fill-mode: forwards;
}

#logo{
    color: red;
    line-height: 100%;
    position: absolute;
    z-index: 4;
    font-weight: bold;
    top: 40%;
    left: 40%;
    -webkit-animation: logo 5s;
    -webkit-animation-fill-mode: forwards;
}




@-webkit-keyframes ligne{

    0%{width:0%;}
    60%{width: 99.9%;}
    80%{width: 99.9%;opacity: 1;}
    100%{width: 99.9%;opacity: 0;}    
}

@-webkit-keyframes fond{

    0%{background-image: linear-gradient(white, #EFF0FF);}
    80%{background-image: linear-gradient(white, #EFF0FF);}
    100%{background: transparent;}
}

@-webkit-keyframes logo{

    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 0;}    
}

我只使用HTML5 / CSS3，所以请不要在JS或其他方面回复解决方案，谢谢:)。