为什么“动画延迟”属性不起作用？

Question

我正在尝试让动画延迟属性在我的JSFiddle（https://jsfiddle.net/ACollinsTMCC/qpvq95ku/8/）上运行两个单独的类，这样当它们悬停在父div（红色框）上时它们似乎会相互淡入淡出，但似乎忽略了这一点。这是我的代码：

CSS

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
25% { opacity: 0.25; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
25% { opacity: 0.25; }
50% { opacity: 0.5; }
75% { opacity: 0.75; }
100% { opacity: 1; }
}

.fadebox {
height:200px;
background:red;
}
.fadebox-child {
display:none;
opacity:0;
height:150px;
width:150px;
background:blue;
border-radius:100%;
margin: 10px auto;
}
.fadewrapper:hover>.fadebox-child {
display:block;
opacity:1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.5s; 
animation-duration: 0.5s;   
}

.2 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;}
.3 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}

HTML

<div class="col-sm-4">
<div class="fadewrapper text-center">
    <div class="fadebox">Digital</div>
    <div class="fadebox-child 1 text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child 2 text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child 3 text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
  </div>
  </div>
  <div class="col-sm-4">
  <div class="fadewrapper text-center">
    <div class="fadebox">Digital</div>
    <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
  </div>
  </div>
  <div class="col-sm-4">
  <div class="fadewrapper text-center">
    <div class="fadebox">Digital</div>
   <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
    <div class="fadebox-child text-center"><p><a href="#"><i class="fa fa-desktop"></i> Web Design</a></p></div>
   </div>
   </div>

关于为什么这不起作用的任何想法？提前谢谢。