Two animations on same element not working

Fiddle | Source

At #lt, I used two animations,

animation: fadeInStamp .5s linear 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;

But it doesn't work, even the first animation doesn't show work.

But if I remove the second one, the first starts working

CSS

#lt {
    opacity: 0;
    transform: scale(4);
    animation: fadeInStamp .5s linear 1 normal both;
    animation: leftArrowBounce .5s linear 1.5s 1 normal both;
}

@keyframes fadeInStamp {
    0% { opacity: 0; }
    30% { opacity: 1; }
    60% { transform: scale(.7); }
    80% { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes leftArrowBounce {
    0% {  }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

HTML

<div id="lt">&lt;</div>