CSS跨浏览器定时动画

Question

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

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

• 动画可以简化并用shorthand syntax
书写
• 默认迭代次数为1，因此可以省略
• 指定未加前缀的属性以及-webkit- most browers support the native property

实施例

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<div>Here I am!</div>

＆＃13;

＆＃13;

＆＃13;