使用 jQuery 隐藏和显示 Firefox 关键帧动画

Question

CSS：

body{
  font-family:helvetica;
  font-size:120%;
}
ul{
  margin-bottom:25px;
}
.thing{
  opacity:0;

  padding:25px;
  background:#e7e7e7;
  -ms-animation: fadeStep 0.5s ease forwards;
  -webkit-animation: fadeStep 0.5s ease forwards;
  -moz-animation: fadeStep 0.5s ease forwards;
  -o-animation: fadeStep 0.5s ease forwards;
  animation: fadeStep 0.5s ease forwards;
  margin:10px;
  float:left;
  width:20%;
}

li{
  list-style:none;
  display:inline;
}
a{
  padding:10px;
  background:grey;
  color:#fff;

}


@-webkit-keyframes fadeStep{ 0%{ opacity: 0; } 100%{ opacity: 1;}}
@-moz-keyframes fadeStep{ 0%{ opacity: 0; } 100%{ opacity: 1;}}
@-o-keyframes fadeStep{ 0%{ opacity: 0; } 100%{ opacity: 1;}}
@keyframes fadeStep{ 0%{ opacity: 0; } 100%{ opacity: 1;};

出于某种原因，在 webkit 浏览器上，动画将在任何时候触发 .hide() 或 .show() 函数被 jQuery 触发。但在 Firefox 中，它似乎只运行一次。

在此处查看 jQuery / HTML 和：http://codepen.io/jonboldendesign/pen/LgEaj

Answer 1

您是否正在尝试使用 CSS3 淡入淡出动画制作选项卡？

尝试通过添加和删除 CSS 类来为内容 div 设置动画。

这里是使用添加和删除 css 类重写您的代码。

http://tinyurl.com/m2p5w8c