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浏览器上,只要jQuery触发.hide()或.show()函数,动画就会触发。但是在Firefox中,它似乎只能运行一次。
在此处查看jQuery / HTML和http://codepen.io/jonboldendesign/pen/LgEaj
最佳答案
您是否要使用CSS3淡入淡出动画制作Tabs?
尝试通过添加和删除将为内容div设置动画的CSS类来实现。
这是使用添加和删除css类重写的代码。
http://tinyurl.com/m2p5w8c