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>

CSS 跨浏览器定时动画

CSS Cross Browser Timed Animations

css

animation

visibility

例子