Ключевой кадр CSS не работает с слайд-шоу изображений CSS

Я пытаюсь получить слайд-шоу css, и я не понимаю, почему это не так. Ошибка в ключевых кадрах. Я пытаюсь заставить изображения спуститься с верхней маски, а затем, когда они скрыты, предыдущее изображение вернется в маску. Это работает только на ключевых кадрах 1 и 2. Я не понимаю, почему. Мой график работы скоро, пожалуйста, помогите!

Код CSS:

#content {
    background-color: white;
    /* border: 1px solid black; */
    padding: 0;
    width: 100%;
    -webkit-box-shadow: 0px 0px 30px 4px #acafb3;
    -moz-box-shadow: 0px 0px 30px 4px #acafb3;
    box-shadow: 0px 0px 30px 4px #acafb3;
    }

    #slider {
        background-image: url('images/ssgbritain.jpg');
        border: 5px solid #eaeaea;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
        height: 265px;
        width: 998px;
        overflow: visible;
        position: relative;
    }
    #fig-container {
        margin:0;
        padding:0;
        position:relative;
    }
    #mask {
        overflow: hidden;
        height: 270px;
    }
    #slider figure {
        width: 998px;
        /* Width Image */
        height: 265px;
        /* Height Image */
        position: absolute;
        top: -270px;
        /* Original Position - Outside of the Slider */
    }
    figure:nth-child(1) {
        animation:cycle 25s linear infinite;
        -moz-animation:cycle 25s linear infinite;
        -webkit-animation:cycle 25s linear infinite;
    }
    figure:nth-child(2) {
        animation:cycle2 25s linear infinite;
        -moz-animation:cycle2 25s linear infinite;
        -webkit-animation:cycle2 25s linear infinite;
    }
    figure:nth-child(3) {
        animation:cycle3 25s linear infinite;
        -moz-animation:cycle3 25s linear infinite;
        -webkit-animation:cycle3 25s linear infinite;
    }
    figure:nth-child(4) {
        animation:cycle4 25s linear infinite;
        -moz-animation:cycle4 25s linear infinite;
        -webkit-animation:cycle4 25s linear infinite;
    }
    figure:nth-child(5) {
        animation:cycle5 25s linear infinite;
        -moz-animation:cycle5 25s linear infinite;
        -webkit-animation:cycle5 25s linear infinite;
    }
    @keyframes cycle {
        0% {
            top: 0px;
        }
        25% {
            top: 0px;
        }
        26% {
            top: -270px;
        }
        96% {
            top: -270px;
        }
        100% {
            top: 0px;
        }
    }
    @-webkit-keyframes cycle {
        0% {
            top: 0px;
        }
        4% {
            top: 0px;
        }
        25% {
            top: 0px;
        }
        26% {
            top: -270px;
        }
        96% {
            top: -270px;
        }
        100% {
            top: 0px;
        }
    }
    @keyframes cycle2 {
        0% {
            top: -270px;
        }
        20% {
            top: -270px;
        }
        24% {
            top: 0px;
        }
        41% {
            top: 0px;
        }
        42% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle2 {
        0% {
            top: -270px;
        }
        20% {
            top: -270px;
        }
        24% {
            top: 0px;
        }
        41% {
            top: 0px;
        }
        42% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
  @keyframes cycle3 {
        0% {
            top: -270px;
        }
        36% {
            top: -270px;
        }
        40% {
            top: 0px;
        }
        61% {
            top: 0px;
        }
        62% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle3 {
    0% {
        top: -270px;
    }
    36% {
        top: -270px;
    }
    40% {
        top: 0px;
    }
    61% {
        top: 0px;
    }
    62% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
    @keyframes cycle4 {
        0% {
            top: -270px;
        }
        52% {
            top: -270px;
        }
        56% {
            top: 0px;
        }
        81% {
            top: 0px;
        }
        82% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle4 {
        0% {
            top: -270px;
        }
        56% {
            top: -270px;
        }
        60% {
            top: 0px;
        }
        81% {
            top: 0px;
        }
        82% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @keyframes cycle5 {
        0% {
            top: -270px;
        }
        68% {
            top: -270px;
        }
        72% {
            top: 0px;
        }
        100% {
            top: 0px;
        }
    }
    @-webkit-keyframes cycle5 {
        0% {
            top: -270px;
        }
        76% {
            top: -270px;
        }
        80% {
            top: 0px;
        }
        92% {
            top: 0px;
        }
        96 % {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }'

Код HTML:

<div id="content">
    <div id="slider">
        <div id="mask">
            <div id="fig-container">
                <figure>
                    <img src="http://coursework/web/images/shopping.jpg" alt="Shopping centre" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/ssgbritain.jpg" alt="SS Great Britain" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/susbridge.jpg" alt="Suspension Bridge" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/xmasmarket.jpg" alt="Suspension Bridge" />
                    <figcaption>rger</figcaption>
                </figure>
             </div>
        </div>
  </div>

Ps игнорирует плохое позиционирование изображения, похоже, только на jsfiddle.