Safari 浏览器在图像上显示模糊动画以实现缩放和不透明度 CSS 动画

Question

我正在为图像制作网络上的悬停动画。 它在 chrome、firefox 上运行良好。但是当我尝试使用 safari 时，动画图像变得模糊，直到动画结束。

所以我在 stackoverflow 上搜索了很多，以了解可能出现的错误，但尝试了所有方法，仍然没有解决方案

html

.hiddenStar{
        
        width:1px;
        height: 1px;
        position:absolute;
        top: 40%; right: 50%;
        transform: translate(50%,-50%);
      
        -moz-opacity: 0; /* Firefox and Mozilla browsers */
        -webkit-opacity: 0; /* WebKit browser e.g. Safari */
        opacity: 0;
       
        -webkit-transform: scale(1,1); /* Safari & Chrome */
        -moz-transform: scale(1); /* Firefox */
      -ms-transform: scale(1); /* Internet Explorer */
      -o-transform: scale(1); /* Opera */
      transform: scale(1);
        transition: all 1s;
        
      }
     
      #starspan:hover +.hiddenStar{
       
        -moz-opacity: 1; /* Firefox and Mozilla browsers */
        -webkit-opacity: 1; /* WebKit browser e.g. Safari */
        opacity: 1;
        
        -webkit-transform: scale(90,90); /* Safari & Chrome */
      -moz-transform: scale(90); /* Firefox */
    -ms-transform: scale(90); /* Internet Explorer */
    -o-transform: scale(90); /* Opera */
    transform: scale(90);
        transition: all 1s;
      }

<p>
  <span className="text-brand " id="starspan" >Star</span>
  <img src="https://res.cloudinary.com/zerko/image/upload/v1634379420/Logomark_kxgewd.svg" class="hiddenStar"/>
  </p>

尝试了 webkit 的缩放和不透明度，但仍然是同样的问题。 我在这里缺少什么？

Answer 1

从

0.01

缩放到

1

在 Safari 中有效。但我不知道为什么...神秘的浏览器...

.hiddenStar{
        
        width:90px;
        height:90px;
        position:absolute;
        top: 40%; right: 50%;
        transform: translate(50%,-50%);
      
        -moz-opacity: 0; /* Firefox and Mozilla browsers */
        -webkit-opacity: 0; /* WebKit browser e.g. Safari */
        opacity: 0;
       
        -webkit-transform: scale(0.01,0.01); /* Safari & Chrome */
        -moz-transform: scale(0.01); /* Firefox */
      -ms-transform: scale(0.01); /* Internet Explorer */
      -o-transform: scale(0.01); /* Opera */
      transform: scale(0.01);
        transition: all 1s;
        
      }
     
      #starspan:hover +.hiddenStar{
       
        -moz-opacity: 1; /* Firefox and Mozilla browsers */
        -webkit-opacity: 1; /* WebKit browser e.g. Safari */
        opacity: 1;
        
        -webkit-transform: scale(1,1); /* Safari & Chrome */
      -moz-transform: scale(1); /* Firefox */
    -ms-transform: scale(1); /* Internet Explorer */
    -o-transform: scale(1); /* Opera */
    transform: scale(1);
      }

<p>
  <span className="text-brand " id="starspan" >Star</span>
  <img src="https://res.cloudinary.com/zerko/image/upload/v1634379420/Logomark_kxgewd.svg" class="hiddenStar"/>
  </p>

Answer 2

您可以尝试向元素添加 will-change 属性

.hiddenStar {
   will-change: transform; /* or "scale" if you use this property instead of "transform" */
}