设置滑块导航箭头的过渡时间

Question

我正在构建一个滑块，并且使用CSS在滑块悬停时显示导航箭头。

div.vslider {
    margin: 0 auto;
    box-sizing: content-box;
    position: relative;
}

div.vslider:hover div.vslider-nav {
    display: block;
}

div.vslider div.vslide {
    display: none;
    position: relative;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

div.vslider div.vslider-nav {
    display: none;
    position: absolute;
    top: calc(50% - 18px);
    z-index: 20;
    border-radius: 100%;
    transition: .6s;
}

div.vslider div.vslider-nav img {
    box-sizing: content-box;
    height: 24px;
    width: 24px;
    border: 1px solid #fff;
    border-radius: 100%;
    transition: .4s;
    cursor: pointer;
}

div.vslider div.vslider-nav img:hover {
    border: 1px solid #000;
    background: #000;
}

div.vslider div.vslider-nav#vslider-previous {
    left: 0;
    margin-left: 10px;
}

div.vslider div.vslider-nav#vslider-previous img {
    padding: 6px 7px 6px 6px;
}

div.vslider div.vslider-nav#vslider-next {
    right: 0;
    margin-right: 10px;
}

div.vslider div.vslider-nav#vslider-next img {
    padding: 6px 6px 6px 7px;
}

<div class='vslider' id='vslider' style="color: #fff; width: 1020px; height: 460px; background-color: #4d4d4d;">
        <div class='vslide' style="background-image: url(http://localhost/wordpress/wp-content/uploads/2019/01/FemaleDirector_1030299388.jpg); height: 100%; width: 100%;">
            <div class='vslider-textbox' style="background-color: #000; color: #fff;">
                <h2>Arts Funding</h2>
                <p>We provide grants for teenagers and young adults aged 16 to 34, who are producing film, music, television, theatre, literature and media that carries a positive social message or that is looking to inspire social change.</p>
                <p><a class='vslider-button'>Apply</a></p>
            </div>
        </div>    
    
        <div class='vslide' style="background-image: url(http://localhost/wordpress/wp-content/uploads/2019/01/VH_Slider_Award.jpg); height: 100%; width: 100%;">

        </div>
    
        <div class='vslider-nav' id='vslider-previous'><img src='http://localhost/wordpress/wp-content/plugins/vis-slider/imgs/left-arrow.png' /></div>
        <div class='vslider-nav' id='vslider-next'><img src='http://localhost/wordpress/wp-content/plugins/vis-slider/imgs/right-arrow.png' /></div>
    </div>

我想添加transition: .4s;（例如），当它们悬停时立即弹出时，我希望它更平滑。我尝试将过渡添加到滑块和按钮div中，但是这些都不影响此特定问题。我的问题基本上是，我该如何定位才能使导航按钮更平稳地过渡？