背景图像悬停淡出效果

Question

我的代码我添加了淡入淡出效果但是当我在css后台属性中调用图像时这不起作用。这是我的代码： -

<ul class="submenu-one submenu menu-toggle">
      <li><a href="#">at a glance</a></li>
      <li><a href="#">Vision and Mission</a></li>
      <li><a href="#">our history</a></li>
      <li><a href="#">our strategy</a></li>
      <li><a href="#">board members</a></li>
 </ul>

定制CSS： -

@keyframes cf3FadeInOut {
 0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}    
#menu > ul li > ul.submenu-one { position: absolute; top:21px; left: 320px; z-index: 2; background: #000000; margin: 0; padding: 0;}
#menu > ul li > ul.submenu li{ list-style: none; text-transform: uppercase; font-size: 16px;}
#menu > ul li > ul.submenu li > a{display: block; padding: 49px 80px 50px 21px; color: #ffffff; min-width: 319px; text-decoration: none;}
#menu > ul li > ul.submenu-one li:nth-child(1) > a:hover{
    background:url(../images/sub-menu-img1.jpg) no-repeat 0px 0px;
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;
}
#menu > ul li > ul.submenu-one li:nth-child(2) > a:hover{background:url(../images/sub-menu-img2.jpg) no-repeat 0px 0px;}
#menu > ul li > ul.submenu-one li:nth-child(3) > a:hover{background:url(../images/sub-menu-img3.jpg) no-repeat 0px 0px;}
#menu > ul li > ul.submenu-one li:nth-child(4) > a:hover{background:url(../images/sub-menu-img4.jpg) no-repeat 0px 0px;}
#menu > ul li > ul.submenu-one li:nth-child(5) > a:hover{background:url(../images/sub-menu-img5.jpg) no-repeat 0px 0px;}

我们编辑了一些代码，请查看以下链接中的更新代码

这里是jsfiddle链接： - https://jsfiddle.net/bharat_negi/ye45gv7y/