CSS3动画在Safari 9本地运行，但不是Live

Question

我正在构建一个新颖的婚礼公告微型网站，它将Instagram Feed中填充的动态背景图像与两个不同的CSS3动画组合在一起。第一个动画的特点是bobblehead夫妇缩放AWAY，而第二个动画由滚动文本组成，在一个有角度的飞机上慢慢滚动到视图中，星球大战风格。

基本上，一切似乎都在起作用，除了滚动的文本是不可见的，虽然它看起来似乎是动画，但只是隐藏在背景图像后面。

它在Chrome中运行良好，当我在本地查看它时，只是不活动。我确信这很简单。任何有关这方面的见解将不胜感激。

感谢!!!

Here's a link to the live site.

CSS

#bobblehead {
    margin: auto 0;
    position: relative;
    text-align: center;
    width: 800px;
    float: middle;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 13s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 13s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {width: 800px; height: 1300px}
    100% {width:0px; height: 0px;}
}


#titles
{
    position: fixed;
    width: 18em;
    height: 50em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 700%;
    font-weight: bold;
    text-align: justify;
    overflow: hidden;
    color: yellow;
    z-index: 100000;


    transform-origin: 50% 100%;
    transform: perspective(300px) rotateX(25deg);

    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
    position: absolute;
    content: ' ';
    left: 0;
    right: 0;
    top: 0;
    bottom: 60%;
    background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    pointer-events: none;
}

#titlecontent
{
    position: absolute;
    top: 100%;
    text-align: center;
    animation-delay: none;
    -webkit-animation-name: scroll;
    -webkit-animation-duration: 450s;
    -webkit-animation-iteration-count: infinte;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: none;
}

@keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}

@-webkit-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}