如何在悬停该图像后为一张图像后面的图像添加动画效果？

Question

下面的基本html我已经给出了基本的html代码。我是web开发的初学者。 在这里，我试图首先动画底层图像，当它徘徊。然后在那个动画后，我想显示另一个图像，同时应用弹跳效果到那个图像，我已经单独完成了两个效果。但不知道如何链接第二个图像动画与第一个？建议解决方案。

    < div id="cf">
        < img class="top" src="/home/animesh/Downloads/index.jpeg"/>
        <img class="bottom" src="/home/animesh/Downloads/logo.jpg"/>    
    </div>

css代码：

    <style>
    #cf img.top
    {
         height:170px;
         width:170px;
         margin-left:10px;
         margin-top:10px;
    }
    #cf img.bottom
    {
         height:170px;
         width:170px;
         margin-left:10px;
         margin-top:10px;
         background:black;
    }
    @-webkit-keyframes cf
    {
         5%
         {
               box-shadow: 1px 1px 5px 1px #ffe6e6;
         }
         15%
         {
               box-shadow: 1px 1px 5px 2px #ff8080;
          }
          25%
          {
                box-shadow: 1px 1px 5px 3px #ff3333;
          }
          35%
          {
                box-shadow: 1px 1px 5px 2px #e60000;
          }
          75%
          {
                box-shadow: 1px 1px 5px 1px #cc0000;    
          }
          85%
          {
                box-shadow: 1px 1px 5px 2px #ff3333;
          }
          95%
          {
                box-shadow: 1px 1px 5px 3px #ff9999;
          }
          100%
          {
                box-shadow: 1px 1px 5px 2px #ffffff;
          }
    }
    @keyframes cf {
          5%
          {
               box-shadow: 1px 1px 5px 1px #ffe6e6;
          }
          15%
          {
               box-shadow: 1px 1px 5px 2px #ff8080;
          }
          25%
          {
               box-shadow: 1px 1px 5px 3px #ff3333;
          }
          35%
          {
                box-shadow: 1px 1px 5px 2px #e60000;
           }
          50%
         {
                box-shadow: 1px 1px 5px 2px #990000;
           }
          75%
          {
                box-shadow: 1px 1px 5px 1px #cc0000;    
          }
          85%
          {
                box-shadow: 1px 1px 5px 2px #ff3333;
          } 
          95%
           {
                 box-shadow: 1px 1px 5px 3px #ff9999;
           }
          100%
          {
                 box-shadow: 1px 1px 5px 2px #ffffff;
          }
    }
    @keyframes bounce {
            0%, 20%, 60%, 100% {
           -webkit-transform: translateY(0);
            transform: translateY(0);
            }

            40% {
               -webkit-transform: translateY(-20px);
               transform: translateY(-20px);
             }

            80% {
                -webkit-transform: translateY(-10px);
                 transform: translateY(-10px);
             }
         }
   #cf img {
        position:absolute;
        left:0;
        -webkit-transition: opacity 1s ease-in-out;
         -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
     }

     #cf img.bottom:hover {
             opacity:0;
             animation-name:cf;
             animation-duration:1s;
             -webkit-animation-iteration-count: infinite;
             animation-iteration-count: infinite;
            }
      #cf img.top:hover{
              animation-name:bounce;
              animation-duration:1s;
           }

    </style>