转换比例转换仅在 Safari 中不起作用？答案

【问题标题】：Transform scale transition not working in Safari only?转换比例转换仅在 Safari 中不起作用？
【发布时间】：2018-07-24 14:36:55
【问题描述】：

好的，我看过类似的问题，但在我的情况下没有任何效果 - 我有一个仅在 Safari 中不起作用的变换比例/过渡。规模发生了，但它突然 - 没有过渡。代码：

.site-title a {
  img {
    -webkit-transition-timing-function: cubic-bezier(0, 1.4, 1, 1) 0s;
    -o-transition-timing-function: cubic-bezier(0, 1.4, 1, 1) 0s;
    -moz-transition-timing-function: cubic-bezier(0, 1.4, 1, 1) 0s;
    transition-timing-function: cubic-bezier(0, 1.4, 1, 1) 0s;
  transition-duration: 300ms;
  }
}
 .site-title a:hover {
 img {
   transform: scale(1.03);
   content: url("https://firebasestorage.googleapis.com/v0/b/file-hosting-723cd.appspot.com/o/Asset%201.png?alt=media&token=07551984-08b6-4c8e-99b4-69280e148aa2")
}
 }
 .site-title a:selected {

 img {
   transform: scale(1.03);
   content: url("https://firebasestorage.googleapis.com/v0/b/file-hosting-723cd.appspot.com/o/Asset%201.png?alt=media&token=07551984-08b6-4c8e-99b4-69280e148aa2")
}
 }

我添加了各种过渡，但 Safari 删除了一些。这里有什么问题？

【问题讨论】：

看来您从未指定过渡属性，只指定持续时间和计时功能，所以我不确定它在任何浏览器中的工作方式。如果你添加它但它仍然无法正常工作，那么人们可以在 Safari 中实际测试的堆栈 sn-p 会很棒。
分享一个可行的例子......我们很容易解决这个问题......
content CSS 属性与 ::before 和 ::after 伪元素一起用于在元素中生成内容。

标签： javascript jquery html css sass

【解决方案1】：

您可以使用此代码。

img {
    -webkit-transform: translateZ(0);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
img:hover {
    -webkit-transform: scale(1.2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

【讨论】：