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:

在加载时隐藏，然后显示一个元素

• 动画可以简化，用简写语法写
• 默认迭代计数为1，因此可以省略
• 指定一个不带前缀的属性以及-webkit-大多数浏览器支持本地属性

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>