電子メール内にこの降雪コードを実装するにはどうすればよいですか？

Question

このコードはhttp://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/にあり、効果が気に入っています。私はそれを私の電子メールに入れても、テーブルの間に巨大な空白ができます。

これをメールに正しく挿入するにはどうすればよいですか？ divタグを特定の場所に配置する必要がありますか？

<style> 
@media screen and (-webkit-min-device-pixel-ratio: 0) { 
.animcontainer{ 
    position:relative; 
    width:100%; 
    height:200px; 
    overflow:hidden; 
    background-color:#007FFF; 
} 
.snow{ 
    border-radius:9px; 
    height:18px; 
    width:18px; 
    position:absolute; 
    top:-20px; 
    background-color:#ffffff; 
} 
.snow1{ 
    -webkit-animation: snowanim1 5s linear 0s infinite; 
} 
.snow2{ 
    -webkit-animation: snowanim2 6s linear 1s infinite; 
} 
.snow3{ 
    -webkit-animation: snowanim3 7s linear 2s infinite; 
} 
@-webkit-keyframes snowanim1 
{ 
    0% { top:0%;left:50%; }   
    100% { top:100%;left:65%; } 
} 
@-webkit-keyframes snowanim2 
{ 
    0% { top:0%;left:30%; }   
    100% { top:100%;left:25%; } 
} 
@-webkit-keyframes snowanim3 
{ 
    0% { top:0%;left:70%; }   
    100% { top:100%;left:60%; } 
} 
} 
</style> 

。

<div class="animcontainer"> 
    <div class="snow snow1"></div> 
    <div class="snow snow2"></div> 
    <div class="snow snow3"></div> 
</div> 

Answer 1

最終的にわかりましたが、divタグはどこにもありません。問題を引き起こしていたのは、アニスコンテナでした。

私は解決できない問題が1つありますが、それはアニメーション内で「トップ：100％」であるにもかかわらずアニメーションがページの下部に届かないため、実際にボトムに達するためには2000％エレガントなソリューションのようには見えません。