Question

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

悬停在图像上时会出现动画。在Chrome，Firefox，Opera等游戏中，动画一直很流畅。但是在Safari上，动画会在结尾处弹出/跳跃。它非常微妙，因此请密切注意文本，以便在此网址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）;提供硬件加速

   string formtocall = "blabla";

    var form = Activator.CreateInstance(Type.GetType("namespace." + formtocall)) as Form;

    form.ShowDialog();

CSS动画最后在Safari上跳转

1 个答案: