Question

我在新网站上使用了一些CSS动画。除了我们拥有的悬停幻灯片外，所有动画都有效。幻灯片由CSS的这一部分创建：

.portfol io-item {
    overflow:hidden;
}

.portfolio-item img {
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    z-index:500;
}

.portfolio-item:hover img {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(100px,0,0);
    transform: translate3d(100px,0,0);
}

.portfolio-item:hover .caption {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(192px,0,0);
    transform: translate3d(192px,0,0);
}

.portfolio-item .shadow {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#666666;
    opacity:0;
    filter:alpha(opacity=0);
}

.portfolio-item:hover .shadow {
    opacity:0.75;
    filter:alpha(opacity=75);
}


.portfolio-item .button {
    border: 1px solid #e2e2e2;
    font-family: robotolight_italic;
    font-size: 19px;
    color: #cacaca;
    line-height: 38px;
    padding: 0 34px;
    cursor: pointer;
    position:relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
    text-decoration: none;
}

.portfolio-item .button:hover {
    color:#ffffff;
    z-index:1;
}

.portfolio-item .button:after {
    content: '';
    position: absolute;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index:-1;
    width: 101%;
    height: 0;
    top: 50%;
    left: 50%;
    background: #fff;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.portfolio-item .button:hover:after {
    height: 75%;
    opacity: 1;
    filter:alpha(opacity=100);
    background:#1F82C5;
}

.portfolio-item .button:active:after {
    height: 130%;
    opacity: 1;
    filter:alpha(opacity=100);
}

我的HTML：

    <div class="portfolio-item" style="height:564px;width:270px">
        <div class="shadow"></div>
        <div class="caption" style="height:564px">
            <h3><span>Test Element</span></h3>
            <div class="category">Category: <br><span>Some Categories</span></div>
            <a class="button" id="7">Details</a>
        </div>
    </div>

基本上是向右滑动，其上方有一个滑动，原始图像上有一点淡入淡出。它适用于所有浏览器：Chrome，Firefox，Opera，Safari，IE9 +但它在Safari移动设备上不起作用。所有其他移动浏览器都处理这个问题。

起初我认为这是冲突，所以我创建了一个jsfiddle，我在iPad上打开了，但它仍然没有用。 iPad运行Safari 7.0。

我不知道出了什么问题。任何帮助将不胜感激。

CSS动画无法在iPad Safari上运行

0 个答案: