Question

我有一个可能听起来很愚蠢的问题，但无论如何它仍然存在。

对于初学者来说，这是我正在创建的网站。 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完美无缺，而另外两个则隐藏起来。请帮忙!!!

Answer 1

首先，没有moz-prefixed animation-delay这样的东西。 -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

Answer 2

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

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

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


-moz-boxshadow

阅读这些前缀的MDN指南。希望能帮助到你！：）

visibility：隐藏在不同浏览器上的工作方式不同

2 个答案: