canvasのfadeIn

Adobe Animateで作ったcanvasのアニメーションを、下記ページにオープニングアニメとして埋め込みました。
アニメをページ読み込み数秒後にフェードインさせたいのですが、JavascriptのfadeInが効きません。fadeOutは効いているようなのですが。
Animateで生成されたJS（anime1.jsとanime_cont1.js）に問題があるのでしょうか。
教えていただけますと幸いです。

http://composite-view.jp/test/

<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <title>test</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="top2.css" type="text/css"> <script type="text/javascript" src="https://special.nikkeibp.co.jp/js/bpcommon/jquery-3.x.min.js"></script> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script src="anime1.js"></script> <script src="anime_cont1.js"></script> <script type="text/javascript">

$(function() {
setTimeout(function(){
$('.start #animation_container').fadeIn(1000);
},3000); //3秒後にフェードin！
});

$(function() {
setTimeout(function(){
$('.start').fadeOut(1000);
},5500); //5.5秒後にフェードアウト！
});
</script>

</head> <body onload="init();"> <div class="start pc"> <div id="animation_container" style="background-color:rgba(214, 214, 214, 0.00); width:1000px; height:600px"> <canvas id="canvas" width="1000" height="600" style="position: absolute; display: block; background-color:rgba(214, 214, 214, 0.00);"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1000px; height:600px; position: absolute; left: 0px; top: 0px; display: block;"> </div> </div> </div> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>