CSS 跨浏览器定时动画

Posted 2023-02-21

【中文标题】CSS 跨浏览器定时动画

【英文标题】：CSS Cross Browser Timed Animations

【发布时间】：2015-08-10 07:45:28

【问题描述】：

我有一些东西需要隐藏几秒钟然后出现。此代码在 Chrome 中完美运行，但在其他任何地方都无法运行。谁能告诉我如何让它在 Firefox/IE 中工作？

.titlebox .md a[href*="#nm"] 
    -webkit-animation-name: hidemeforabit;
    -webkit-animation-duration: 1.25s;
    -webkit-animation-iteration-count: 1;
    animation-name: hidemeforabit;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
    -moz-animation-name: hidemeforabit;
    -moz-animation-duration: 1.25s;
    -moz-animation-iteration-count: 1;
    opacity: 1;

.titlebox .md a[href*="#dm"] 
    -webkit-animation-name: hidemeforabit;
    -webkit-animation-duration: 1.25s;
    -webkit-animation-iteration-count: 1;
    animation-name: hidemeforabit;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
    -moz-animation-name: hidemeforabit;
    -moz-animation-duration: 1.25s;
    -moz-animation-iteration-count: 1;
    opacity: 1

.side .md h4:nth-of-type(1) 
    -webkit-animation-name: hidemeforabit;
    -webkit-animation-duration: 1.25s;
    -webkit-animation-iteration-count: 1;
    animation-name: hidemeforabit;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
    -moz-animation-name: hidemeforabit;
    -moz-animation-duration: 1.25s;
    -moz-animation-iteration-count: 1;
    opacity: 1;

@-webkit-keyframes hidemeforabit 
    from 
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        right: -100000px !important;
        z-index: -1 !important;
        display: none !important;
        opacity: 1;
    
    to 
        opacity: 0;
    

@keyframes hidemeforabit 
    from 
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        right: -100000px !important;
        z-index: -1 !important;
        display: none !important;
        opacity: 1;
    
    to 
        opacity: 0;
    

@-moz-keyframes hidemeforabit 
    from 
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        right: -100000px !important;
        z-index: -1 !important;
        display: none !important;
        opacity: 1;
    
    to 
        opacity: 0;
    

【问题讨论】：

复制-webkit-animation 属性，删除-webkit- 并将它们放在前缀属性之后。 Most browers support the native CSS property, including the latest Chrome stable -- Here is an example snippet

【参考方案1】：

目前属性在动画结束时应用，移除元素。

要简单地在加载时隐藏然后显示元素，请使用opacity：

动画可以简化写在shorthand syntax 默认迭代次数为1，因此可以省略 指定一个不带前缀的属性以及-webkit- most browers support the native property

示例

div 
  -webkit-animation: hidemeforabit 3s;
  animation: hidemeforabit 3s;
  opacity: 1;

@-webkit-keyframes hidemeforabit 
  from 
    opacity: 0;
  
  to 
    opacity: 1;
  

@keyframes hidemeforabit 
  from 
    opacity: 0;
  
  to 
    opacity: 1;
  

<div>Here I am!</div>

【讨论】：

我需要隐藏几秒钟，然后才能显示出来。不会这样做让它可见然后隐藏它？

错了 - 如果您删除 所有当前动画 CSS 属性 并使用 我在我的示例中所拥有的（使用您的选择器），它将工作。

好的。我现在“有点”工作了。它确实让它暂时看穿了，但是这种方法还不是“完美的”。我的一些其他 CSS 使 div position:absolute 并将其移动到靠近页面顶部。在 chrome 中，它会完全隐藏 div，直到动画计时器结束，但在 Firefox 中，div 是可见的但稍微清晰，然后在动画计时器结束后它会自行移动到正确的位置。看起来很糟糕

@AverageJoe - 您能否在您的问题中弹出一些 html 以及您现在拥有的复制此问题的 CSS？

这是我的 reddit。注意右侧的“夜间模式”。完全按照我在 Chrome 中的要求工作。其他地方没有那么多。 reddit.com/r/blackdesertonline