CSS3 のみで display: none; の状態からからフェードインさせる方法を調べてみました。たとえば特定のクラスがついたときにフェードインさせるには下記のようにすればできました。 display の animation はできないので、下記のように 1% のキーフレームを追加して 表示かつ opacity: 0; としておくのがポイントです。
<!DOCTYPE html>
<html>
<head>
<meta charst='utf-8'>
<title>TEST</title>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
.box {
background: #000000;
display: none;
height: 240px;
opacity: 0;
width: 240px;
}
.visible.box {
display: block;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}
@keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
</style>
<script>
$(function() {
$('#btn').click(function() {
$('.box').toggleClass('visible');
});
});
</script>
</head>
<body>
<div class='container'>
<div class="box"></div>
<div>
<button id='btn'>START</button>
</div>
</div>
</body>
</html>