将动画延迟添加到Divi标准CSS

如何解决将动画延迟添加到Divi标准CSS

对于我的网站，我使用Divi作为主题。 divi功能的一个很好的细节是 divi点导航，对于这个特殊的问题，我试图通过延迟 divi来覆盖默认的 divi点导航功能。点导航应该从右边变得可见并具有动画效果。在下面的代码中，我添加了-800px，以确保该自定义代码实际上可以正常工作-是的，它可以！

我一直在尝试：

ul.et_pb_side_nav.et-visible {
    opacity: 0;
    -webkit-animation: fadeInRight 1.5s 1 cubic-bezier(.77,.175,1) !important;
    -moz-animation: fadeInRight 1.5s 1 cubic-bezier(.77,1) !important;
    -o-animation: fadeInRight 1.5s 1 cubic-bezier(.77,1) !important;
    animation: fadeInRight 1.5s 1 cubic-bezier(.77,1) !important;
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}


/* Chrome,Safari,Opera */
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

/* Standard syntax */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-800px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

即使动画来自-800px，但延迟也不起作用！我需要此动画在开始前等待 20秒。

您对此有何建议？ （看来divi点导航的pro version不能设置动画延迟）