Html 如何在电子邮件中实现此降雪代码？

我在上找到了这段代码，并喜欢它的效果。虽然当我把它放进我的电子邮件时，它在表格之间创造了一个巨大的空白

如何将其正确插入电子邮件？我需要把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>

@媒体屏幕和（-webkit最小设备像素比：0）{
.动物容器{
位置：相对位置；
宽度：100%；
高度：200px；
溢出：隐藏；
背景色：#007FFF；
}
.斯诺{
边界半径：9px；
高度：18px；
宽度：18px；
位置：绝对位置；
顶部：-20px；
背景色：#ffffff；
}
.斯诺1{
-webkit动画：snowanim1 5s线性0s无限；
}
.斯诺2{
-webkit动画：snowanim2 6s线性1s无限；
}
.斯诺3{
-webkit动画：snowanim3 7s线性2s无限；
}
@-webkit关键帧snowanim1
{
0%{顶部：0%；左侧：50%；}
100%{顶部：100%；左侧：65%；}
}
@-webkit关键帧snowanim2
{
0%{顶部：0%；左侧：30%；}
100%{顶部：100%；左侧：25%；}
}
@-webkit关键帧snowanim3
{
0%{顶部：0%；左侧：70%；}
100%{顶部：100%；左侧：60%；}
}
}

---

我最终找到了答案，div标记的位置没有区别。导致问题的是容器

---

然而，有一个问题我无法解决，那就是动画没有到达页面底部，尽管它在动画中是“顶部：100%”，所以我必须做2000%才能真正到达底部，这看起来不是一个优雅的解决方案。

电子邮件的HTML与web的HTML不同。不同的电子邮件客户端可能会以不同的方式破坏这一点。我知道它在某些客户端不起作用，我只想知道如何插入它。此外，我还要补充一点，我发布的代码是根据创建者为电子邮件设计的。

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