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-transform: 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);
}