CSS动画在Safari上跳到最后

Question

我有一个问题，涉及使用Safari时最后跳转的CSS过渡效果。

当鼠标悬停在图像上时发生动画。在Chrome，Firefox，Opera等平台上，动画一路畅通。然而在Safari上，动画弹出/跳到最后。这是非常微妙的，所以请留意文本，看看它在这个URL here

我在网上找不到任何提到这个问题。我已经提供了下面的CSS。有谁知道为什么发生这种情况？

.img-box { 
 
    width: 100%; 
 
    height: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    cursor: default; 
 
} 
 

 
.img-box .overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background:rgba(0, 0, 0, 0.2); 
 
    opacity:0; 
 
    top: 0; 
 
    left: 0; 
 
    padding:10px; 
 
    transition-duration:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
.img-box .overlayDark { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background:rgba(0, 0, 0, 0.3); 
 
    opacity:0; 
 
    top: 0; 
 
    left: 0; 
 
    padding:10px; 
 
    transition-duration:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
.img-box .overlay:hover { 
 
    opacity:1; 
 
} 
 
.img-box .overlay:focus { 
 
    opacity:1; 
 
} 
 
.img-box .overlay:active { 
 
    opacity:1; 
 
} 
 
.img-box img { 
 
    display: block; 
 
    position: relative; 
 
    transition:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 

 
.img-box:hover img { 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
} 
 
.img-box:focus img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(2px); 
 
} 
 
.img-box:active img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(2px); 
 
} 
 

 
.img-box h1 { 
 
    margin-top:100px; 
 
    text-transform: uppercase; 
 
    color: #cbcbcb; 
 
    text-align: center; 
 
    position: relative; 
 
    font-size: 25px; 
 
    overflow: hidden; 
 
    padding: 0.5em 0; 
 
    background-color: transparent; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 

 

 
.img-box a, .img-box p { 
 
    color: #cbcbcb; 
 
    padding:50px; 
 
    font-size:17px; 
 
    opacity: 0; 
 
    text-align: center; 
 
    -webkit-transition: opacity 1.5s, -webkit-transform 1.5s; 
 
    transition: opacity 1.5s, transform 1.5s; 
 
    transition: opacity 1.5s, transform 1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
@media(max-width:1200px) { 
 
    .img-box h1 { 
 
     margin-top:0vh; 
 
    } 
 
    .img-box p { 
 
     padding:0px!important; 
 
    } 
 
} 
 

 
.img-box:hover a, .img-box:hover p { 
 
    opacity: 1; 
 
} 
 
.img-box:focus a, .img-box:focus p { 
 
    opacity: 1; 
 
} 
 
.img-box:active a, .img-box:active p { 
 
    opacity: 1; 
 
}

Answer 1

使用-webkit变换：translate3d（0,0,0）;给硬件加速

.img-box a, .img-box p { 
    color: #cbcbcb; 
    padding:50px; 
    font-size:17px; 
    opacity: 0; 
    text-align: center; 
    -webkit-transition: opacity 1.5s, -webkit-transform 1.5s; 
    transition: opacity 1.5s, transform 1.5s; 
    transition: opacity 1.5s, transform 1.5s; 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
    -webkit-transform: translate3d(0, 0, 0); 
}