【CSS3】-webkit-keyframesの途中で画像が表示されない

画像を15枚下から上にスライドしていくようなcssアニメーションをおこなっているのですが、7枚目から画像が表示されなくなります。
原因がまったくわかりません。
問題になっているのは、idがphotoの部分です。

html
1<div class="stage">
2        <div class="cube">
3            <!-- 横回転 -->
4            <div id="cube3" class="cube_right">
5                <span>
6                    <div id="photo_select">
7                        <div id="photo2014" class="photo_year" data-year="2014">
8                            <img src="<?php echo URL_IMG . '/photo/2014/1.jpg'; ?>">
9                            <div class="filter">2014</div>
10                        </div>
11                        <div id="photo2015" class="photo_year" data-year="2015">
12                            <img src="<?php echo URL_IMG . '/photo/2015/1.jpg'; ?>">
13                            <div class="filter">2015</div>
14                        </div>
15                        <div id="photo2016" class="photo_year" data-year="2016">
16                            <img src="<?php echo URL_IMG . '/photo/2016/1.jpg'; ?>">
17                            <div class="filter">2016</div>
18                        </div>
19                    </div>
20                    <div id="photo">
21                        <div id="photo_wrapper_2014" class="photo_wrapper" data-year="2014">
22                            <?php
23                                $i = 1;
24                                while($i <= 15):
25                            ?>
26                                <img src="<?php echo URL_IMG . '/photo/2014/' . $i . '.jpg'; ?>">
27                            <?php
28                                    $i = $i + 1;
29                                endwhile;
30                            ?>
31                        </div>
32                        <div id="photo_wrapper_2015" class="photo_wrapper" data-year="2015">
33                            <?php
34                                $i = 1;
35                                while($i <= 15):
36                            ?>
37                                <img src="<?php echo URL_IMG . '/photo/2015/' . $i . '.jpg'; ?>">
38                            <?php
39                                    $i = $i + 1;
40                                endwhile;
41                            ?>
42                        </div>
43                        <div id="photo_wrapper_2016" class="photo_wrapper" data-year="2016">
44                            <?php
45                                $i = 1;
46                                while($i <= 15):
47                            ?>
48                                <img src="<?php echo URL_IMG . '/photo/2016/' . $i . '.jpg'; ?>">
49                            <?php
50                                    $i = $i + 1;
51                                endwhile;
52                            ?>
53                        </div>
54                    </div>
55                </span>
56            </div>
57        </div>
58    </div>

css
1
2
3/* タグ */
4
5    /* 共通 */
6    .cube > div {
7        position: absolute;
8    }
9
10    /* フォト */
11    .photo_wrapper img {
12        margin-bottom: 40px;
13        /*width: 800px;*/
14        height: auto;
15        vertical-align: bottom;
16    }
17
18    .cube_right span {
19        display: table-cell;
20        vertical-align: middle;
21    }
22
23    /* cube_back */
24
25
26
27/* id */
28
29    /* フォト */
30    #photo_select {
31        margin: 0 auto;
32        width: 800px;
33        overflow: hidden;
34    }
35
36        #photo2016 {
37            position: relative;
38            float: left;
39            width: 30%;
40            height: calc(800px / 10 * 3 / 4 * 3);
41        }
42
43        #photo2015 {
44            position: relative;
45            float: left;
46            margin-right: 5%;
47            width: 30%;
48            height: calc(800px / 10 * 3 / 4 * 3);
49        }
50
51        #photo2014 {
52            position: relative;
53            float: left;
54            margin-right: 5%;
55            width: 30%;
56            height: calc(800px / 10 * 3 / 4 * 3);
57        }
58
59            #photo_select img {
60                width: 100%;
61                height: auto;
62                vertical-align: bottom;
63            }
64
65    #photo {
66        display: none;
67        margin: 0 auto;
68        width: 800px;
69        perspective: 600px;
70        -webkit-perspective: 600px;
71        height: 700px;
72        overflow: hidden;
73    }
74
75
76/* class */
77
78    /* 共通 */
79    .stage {
80        position: fixed;
81        top: 0;
82        left: 0;
83        width: 100%;
84        -webkit-perspective: 1000;
85        -ms-perspective: 1000;
86        -o-perspective: 1000;
87        -moz-perspective: 1000px;
88        perspective: 1000;
89    }
90
91    .cube {
92        position: relative;
93        margin:0 auto;
94        width: 100%;
95        transform-style: preserve-3d;
96        transition:all 1s;
97    }
98
99    /* 横回転 */
100    .cube_front {
101        top: 0px;
102        left: 0px;
103        color: #56FBB7;
104        background-color: #000011;
105    }
106
107    .cube_back {
108        top: 0px;
109        left: 0px;
110        background-color: #000011;
111    }
112
113    .cube_right {
114        display: table;
115        top: 0px;
116        -webkit-transform: rotateY(90deg);
117        transform: rotateY(90deg);
118        background-color: #000011;
119    }
120
121    .cube_left {
122        top: 0px;
123        -webkit-transform: rotateY(-90deg);
124        transform: rotateY(-90deg);
125        background-color: #000011;
126    }
127
128
129    /* フォト */
130    .photo_year {
131        cursor: pointer;
132    }
133
134    .filter {
135        position: absolute;
136        top: 0;
137        left: 0;
138        z-index: 2;
139        width: 100%;
140        height: calc(800px / 10 * 3 / 4 * 3);
141        color: #fff;
142        background-color: rgba(66, 73, 83, 0.4);
143        font-size: 24px;
144        font-weight: bold;
145        line-height: calc(800px / 10 * 3 / 4 * 3);
146        text-align: center;
147    }
148
149    .photo_wrapper {
150        display: none;
151        -webkit-animation: typetext linear 20s infinite;
152    }
153
154    @-webkit-keyframes typetext {
155        0% {transform: rotateX(45deg) translate3d(0,1000px,2600px);}
156        100% {transform: rotateX(45deg) translate3d(0,-4800px,2600px);}
157    }
158

javascript
1    function setCube(){
2        // 横回転
3        $('.cube').css({'transform':'translateZ(-' + wW/2 +'px)'});
4        $('.cube').css({'height': wH + 'px'});
5        $('#profile_wrapper').css({'height': wH + 'px'});
6        $('#form_wrapper').css({'height': wH + 'px'});
7        $('.cube').children("div").css({'width' : wW + 'px', 'height': wH + 'px'});
8        $('.cube_left').css({'left' : '-' + wW/2 + 'px'});
9        $('.cube_right').css({'right' :'-' + wW/2 + 'px'});
10        $('.cube_front').css({'transform':'translateZ(' + wW/2 + 'px)'});
11        $('.cube_back').css({'transform':'translateZ(-' + wW/2 + 'px) rotateY(180deg)'});
12    }
13
14    function clickNav() {
15        $(".rotate").click(function(event) {
16            var destination = $(this).text();
17            if ('photo' === destination) {
18                $("#now").text("photo");
19                $("#nav_right").text("contact");
20                $("#nav_left").text("profile");
21            } else if ("profile" === destination) {
22                $("#now").text("profile");
23                $("#nav_right").text("photo");
24                $("#nav_left").text("message");
25            } else if ('message' === destination) {
26                $("#now").text("message");
27                $("#nav_right").text("profile");
28                $("#nav_left").text("contact");
29            } else if ("contact" === destination) {
30                $("#now").text("contact");
31                $("#nav_right").text("message");
32                $("#nav_left").text("photo");
33            }
34            // 横回転
35            event.preventDefault();
36            var moveDeg = $(this).data('deg');
37            console.log('動く分' + moveDeg);
38            var now_deg = deg;
39            console.log('動く前' + now_deg);
40            deg = deg + moveDeg;
41            console.log('動いた結果' + deg);
42            $('.cube').css({
43                'transition-duration': '1s',
44                'transform':'translateZ(-'+wW/1.5+'px) rotateY('+now_deg+'deg)'
45            });
46            setTimeout(function(){
47                $('.cube').css({
48                    'transition-duration': '1s',
49                    'transform':'translateZ(-'+wW/1.5+'px) rotateY('+deg+'deg)'
50                });
51                setTimeout(function(){
52                    $('.cube').css({
53                        'transition-duration': '1s',
54                        'transform':'translateZ(-'+wW/2+'px) rotateY('+deg+'deg)'
55                    });
56                    // $("#cube1").removeClass('cube_front').addClass('cube_left');
57                    // $("#cube2").removeClass('cube_back').addClass('cube_right');
58                    // $("#cube3").removeClass('cube_right').addClass('cube_front');
59                    // $("#cube4").removeClass('cube_left').addClass('cube_back');
60                    // $('.cube').css({'transform':'rotateY(0deg)'});
61                },1000);
62            },500);
63            //アニメーション重複を回避
64            // $(this).parents('ul').find('a').removeClass('active');
65            // $(this).addClass('active');
66            // 縦回転
67            // event.preventDefault();
68            // var deg = $(this).data('deg');
69            // $('.cube').css({'transform':'translateZ(-'+wH/2+'px) rotateX('+deg+'deg)'});
70        });
71    }