What is the proper transitionend (or animationend) that I need to apply?

Okay Im mostly unsure how to use transitionend (or if Im supposed to use animationend in this case). Im unsure if Im supposed to use var, node or box. Pretty much Im a complete novice in this case.

Im trying to make it so my div animates a opacity transition for 1 iteration after a short delay from 0% opacity to 100% opactiy to 5% opacity. Then the second animation I want to delay to play just after the first animation is done and then do a lesser opacity shift for infinite iterations.

Heres the .css

.container{
    position: absolute;
    width: 224px;
    height: 220px;
    background-color: black;
}
.centerhex{
    background-image:url(http://i.imgur.com/4sZDtfK.png);
    height:224px;
    width:210px;
    position:absolute;
}
.done{
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.transtart{
    opacity:0
}
.fadein{    
    animation:fadein 0.65s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -webkit-animation:fadein 0.65s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
.pulse{ 
    animation:fadein 4s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
    animation-delay:1s
    -webkit-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation:fadein 4s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes fadein { 
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@keyframes fadein {
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@-webkit-keyframes pulse { 
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    13%{opacity:0.1;}
    100%{opacity:0.05;} 
}
@keyframes pulse {
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    13%{opacity:0.1;}
    100%{opacity:0.05;} 
}

Heres the HTML

<div class="container">
    <div class="centerhex fadein transtart done"></div>
</div>

I put a demo here: http://jsfiddle.net/2yLqj/

In my demo the "fadein" animation is the first animation, and the "pulse" animation is the second animation I want to attach. I did not add the pulse animation to the div because it breaks the intended effect.

I would greatly appreciate any help! Thanks!