HTML中的动画页脚

Question

所以，我有一个带有三个图标的页脚。我已将它设置为停留在网页的底部，我希望它能够以动画淡入淡出。我使用相同的＆＃34;出现动画＆＃34;至于我身体的其他部分，但是这个部分行为不端！

页脚确实需要800毫秒才能显示，但是没有动画 - 它突然出现在那里！我也试过FadeInDown，得到了同样的结果。

代码是Porto HTML5模板的一部分。

HTML：

    <div class="appear-animation" data-appear-animation=fadeInUp" data-appear-animation-delay="800">
        <footer id="footer" class="color color-secondary short">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 center">
                        <ul class="social-icons mb-md">
                            <li class="social-icons-fa-github"><a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github"></i></a></li>
                            <li class="social-icons-linkedin"><a href="www.linkedin.com" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                            <li class="social-icons-stack-overflow"><a href="http://stackoverflow.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
    </footer>
</div>

CSS：

@-webkit-keyframes fadeInUp {
0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUp {
0% {
    opacity: 0;
    -moz-transform: translateY(20px);
}

100% {
    opacity: 1;
    -moz-transform: translateY(0);
}
}

@-o-keyframes fadeInUp {
0% {
    opacity: 0;
    -o-transform: translateY(20px);
}

100% {
    opacity: 1;
    -o-transform: translateY(0);
}

}

 @keyframes fadeInUp {
0% {
    opacity: 0;
    transform: translateY(20px);
}

100% {
    opacity: 1;
    transform: translateY(0);
    }
     }

 .fadeInUp {
 -webkit-animation-name: fadeInUp;
 -moz-animation-name: fadeInUp;
 -o-animation-name: fadeInUp;
animation-name: fadeInUp;