Как сделать действие после анимации при hover?

.calendar__squares { 
  opacity: 0; 
} 
 
@keyframes calendar-animation { 
  0% { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 1; 
  } 
} 
#svg-calendar:hover .calendar__squares { 
  animation: calendar-animation 2s 2s; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-1 { 
  animation: calendar-animation 2s 0.1s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-2 { 
  animation: calendar-animation 2s 0.2s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-3 { 
  animation: calendar-animation 2s 0.3s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-4 { 
  animation: calendar-animation 2s 0.4s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-5 { 
  animation: calendar-animation 2s 0.5s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-6 { 
  animation: calendar-animation 2s 0.6s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-7 { 
  animation: calendar-animation 2s 0.7s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-8 { 
  animation: calendar-animation 2s 0.8s infinite; 
} 
#svg-calendar:hover .calendar__squares#calendar-square-9 { 
  animation: calendar-animation 2s 0.9s infinite; 
}

<svg version="1.1" id="svg-calendar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	 width="65px" height="64px" viewBox="0 0 65 64" enable-background="new 0 0 65 64" xml:space="preserve"> 
<g> 
	<rect fill="none" width="65" height="64"/> 
	<g> 
		<path fill="#BD9131" d="M62,5H52V2c0-1.104-0.896-2-2-2s-2,0.896-2,2v3H35V2c0-1.104-0.896-2-2-2s-2,0.896-2,2v3H17V2 
			c0-1.104-0.896-2-2-2c-1.104,0-2,0.896-2,2v3H3C1.345,5,0,6.32,0,7.95v53.099C0,62.679,1.345,64,3,64h59c1.657,0,3-1.321,3-2.951 
			V7.95C65,6.32,63.657,5,62,5z M61,60H4V9h9v3c0,1.104,0.896,2,2,2c1.104,0,2-0.896,2-2V9h14v3c0,1.104,0.896,2,2,2s2-0.896,2-2V9 
			h13v3c0,1.104,0.896,2,2,2s2-0.896,2-2V9h9V60z"/> 
		<rect x="13" id="calendar-square-1" class="calendar__squares" y="21" fill="#BD9131" width="8" height="7"/> 
		<rect x="29" id="calendar-square-2" class="calendar__squares" y="21" fill="#BD9131" width="8" height="7"/> 
		<rect x="44" id="calendar-square-3" class="calendar__squares" y="21" fill="#BD9131" width="8" height="7"/> 
		<rect x="13" id="calendar-square-7" class="calendar__squares" y="45" fill="#BD9131" width="8" height="7"/> 
		<rect x="29" id="calendar-square-8" class="calendar__squares" y="45" fill="#BD9131" width="8" height="7"/> 
		<rect x="44" id="calendar-square-9" class="calendar__squares" y="45" fill="#BD9131" width="8" height="7"/> 
		<rect x="13" id="calendar-square-4" class="calendar__squares" y="33" fill="#BD9131" width="8" height="7"/> 
		<rect x="29" id="calendar-square-5" class="calendar__squares" y="33" fill="#BD9131" width="8" height="7"/> 
		<rect x="44" id="calendar-square-6" class="calendar__squares" y="33" fill="#BD9131" width="8" height="7"/> 
	</g> 
</g> 
</svg>

let outer = document.querySelector('.outer'), 
    inner = Array.from(document.querySelectorAll('.inner')); 
     
inner.forEach(function(item, index, arr) { 
  item.addEventListener('transitionend', function() { // присвоим каждому квадрату слушателя на оконачание transition 
    if (this.nextElementSibling) { 
      this.nextElementSibling.classList.add('inner--shown'); // при наличии следующего 
                                                             // элемента добавим ему класс,                                                                    // который будет менять                                                                          // непрозрачность квадрата 
    } else { 
      inner.forEach(function(item, index, arr) { // если следующий элемент для анимации 
        item.classList.remove('inner--shown');   // отстутствует, то снимаем класс, добавляющий 
      });                                        // непрозрасность, со всех элементов 
       
      setTimeout(function() {                    // через 150 мс добавим класс и таким образом  
        arr[0].classList.add('inner--shown');    // запустим цепочку заново 
      }, 150); 
    } 
  }); 
}); 
 
outer.addEventListener('mouseover', animateFirst); 
outer.addEventListener('mouseout', deactivate); 
 
function animateFirst() {                        // обработка наведения мышки на объект 
  outer.classList.remove('outer--mouseout'); 
  inner[0].classList.add('inner--shown'); 
} 
 
function deactivate() {                          // обработка отведения мышки от объекта 
  inner.forEach(function(item, index, arr) { 
    item.classList.remove('inner--shown') 
  }); 
   
  outer.classList.add('outer--mouseout'); 
}

.outer { 
  width: 50px; 
  height: 50px; 
  border: 2px solid; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around; 
  align-items: center; 
  padding: 5px; 
  box-sizing: border-box; 
  position: relative; 
  transition: background-color .15s; 
} 
 
.outer:after { 
  position: absolute; 
  content: ''; 
  width: 100%; 
  height: 100%; 
} 
 
.inner { 
  width: 10px; 
  height: 10px; 
  background-color: #000; 
  opacity: 0; 
} 
 
.inner--shown { 
  opacity: 1; 
  transition: opacity .15s; 
} 
 
.outer--mouseout { 
  background-color: #c5e3ff; 
}

<div class=outer> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
  <div class=inner></div> 
</div>