动画列表在其他手机上均无法正常显示在iPhone4上

Question

我制作了一个动画列表，其中包含3条信息，并且每4秒更改一次。问题在于，它适用于每部手机，但不适用于iPhone 4，第二个和第三个孩子的信息会一起显示。我已经尝试了几乎所有内容，但无法在iPhone 4上使用它。

这是动画的css：

.valueprop-wrapper {
                width: 100%;
background-color: #f8f7f5; 
padding-bottom: 0px;
            }

            .valueprop-liste {
                margin: 0 auto;
                height: 25px;
                position: relative;
            }

            .valueprop-liste-item {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                font-size: 12px;
                color: #33302d;
                line-height: 1.6px;
                -webkit-transition-duration: 1s;
                -moz-transition-duration: 1s;
                -o-transition-duration: 1s;
                transition-duration: 1s;
                padding: 6px 20px;
                text-align: center;
                -webkit-animation: valuepropListe 12s 0s infinite;
                -moz-animation: valuepropListe 12s 0s infinite;
                -o-animation: valuepropListe 12s 0s infinite;
                animation: valuepropListe 12s 0s infinite;
            }

            .valueprop-liste-item:nth-child(2) {
                -webkit-animation-delay: 4s;
                -moz-animation-delay: 4s;
                -o-animation-delay: 4s;
                animation-delay: 4s;
            }

            .valueprop-liste-item:nth-child(3) {
                -webkit-animation-delay: 8s;
                -moz-animation-delay: 8s;
                -o-animation-delay: 8s;
                animation-delay: 8s;
            }

            @-webkit-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @-moz-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @-o-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

这是我称为动画的代码：

<div class="col-xs-15 col-sm-15 col-md-15 col-lg-15 mobile-view">
                            <hr class="rwd-bg-naht-grau" style="margin-bottom: 0px;" />
                            <div class="valueprop-wrapper">
                                <div class="valueprop-liste">
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_1"]?></b></span>
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_2"]?></b></span>
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_3"]?></b></span>
                                </div>
                            </div>
                            <hr class="rwd-bg-naht-grau" style="margin-top: 0px;" />
                        </div>

有人可以帮忙吗？是否只有iOS的动画值，iPhone 4才能显示正确的位置？