可见性：隐藏在不同浏览器上的工作方式不同

Posted 2023-02-21

【中文标题】可见性：隐藏在不同浏览器上的工作方式不同

【英文标题】：visibility: hidden working differently on different browsers

【发布时间】：2015-11-16 19:17:10

【问题描述】：

我有一个听起来可能很愚蠢的问题，但不管怎样。

首先，这是我正在创建的网站。 www.redshedproductionsllc.com

我在我的网站上的 h1 元素上运行了一个动画，该动画在延迟后淡入。问题是文本在动画开始之前显示，所以它的开始有点小问题。我找到了一种在 chrome 上完美运行的解决方法，但在任何其他浏览器上都没有。该元素只是保持隐藏状态。这是我的 CSS。

#fading1 

 animation: fadein 4s;
 -moz-animation: fadein 4s; /* Firefox */
 -webkit-animation: fadein 4s; /* Safari and Chrome */
 -o-animation: fadein 4s; /* Opera */


#fading2 

  visibility: hidden;
  animation: fadein 4s;
  -moz-animation: fadein 4s; /* Firefox */
  -webkit-animation: fadein 4s; /* Safari and Chrome */
  -o-animation: fadein -4s; /* Opera */

  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;

  -moz-animation-fill-mode: forwards; /*FF 5+*/
  -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
  -o-animation-fill-mode: forwards; /*Not implemented yet*/
  -ms-animation-fill-mode: forwards; /*IE 10+*/
  animation-fill-mode: forwards; /*when the spec is finished*/

在 chrome 上查看，然后在 firefox 或 safari 上查看。 Chrome 完美地淡入，而其他两个则保持隐藏。请帮忙！！！

【问题讨论】：

你试过opacity吗？

我只是在发布此内容后立即尝试过。完美运行。万分感谢！！！ :D

请记住opacity 不是visibility 的直接替代品。如果您希望您的元素在隐藏时不交互，opacity 会让您失望。

【参考方案1】：

首先，没有moz-prefixed动画延迟之类的东西。拥有-moz-animation-delay: 2s 是不必要的。我不确定为什么它在 chrome 而不是 Firefox 中工作，但我觉得可见性动画在所有浏览器中都不能正常工作。

在三秒内将其从 opacity: 0 淡入到 opacity: 1 对我来说更有意义，但将前两秒设为延迟，将不透明度保持为 0。

@keyframes fadein 
    0% opacity: 0;
    66% opacity: 0;
    100% opacity: 1;

@-webkit-keyframes fadein 
    0% opacity: 0;
    66% opacity: 0;
    100% opacity: 1;


.fade
    opacity: 1;
    -moz-animation: fadein 3s;
    animation: fadein 3s;
    width: 100px;
    height: 100px;
    background: blue;

JSFiddle

【讨论】：

谢谢帕特里克。我最终切换了可见性：隐藏与不透明度：0，它完美地工作。感谢您的帮助！

请记住，opacity 不是visibility 的直接替代品，如果您希望您的元素在隐藏时是非交互的。

【参考方案2】：

我不太确定，但你必须使用这样的东西：

所以问题是，你必须为每个浏览器指定 CSS 的某些功能，所以你应该这样做：

@-webkit-keyframes fadein 
    0% opacity: 0;
    66% opacity: 0;
    100% opacity: 1;


-moz-boxshadow

阅读 MDN 指南以了解这些前缀。 希望能帮助到你！ :)