如何减慢CSS动画？

Question

CSS

@-webkit-keyframes fader {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
#logo img.top {
    -webkit-animation-name:fader;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-delay:1s;
    -webkit-animation-duration:2s;
    -webkit-animation-direction:alternate;
}

HTML

<div id="logo">
    <img class="bottom" src="images/logo2.png">
    <img class="top" src="images/logo1.png">
</div>

问题

这会在无限循环中交叉淡化两个图像，并且效果非常好。但是，实际过渡太快了。调整持续时间只会延迟交叉渐变之间的时间。如何减慢衰落速度而不仅仅是转换之间的时间？