CSS 跨浏览器定时动画

Question

我有一些东西需要隐藏几秒钟然后出现。此代码在 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;
    }
}

Answer 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>