Javascript 将动画插入到成形div中

我必须承认我在CSS方面还不是一个天才。。。为了练习，我正在创建一个模拟啤酒杯的动画

目前，通过一些示例，我已经获得了所需的动画：

还有我想要的形状：

#liquid {
    background: black;
    border-bottom: 500px solid #e39700;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    width: 300px;
    color: #fff8eb;
    position: absolute;
    clip:auto;
    overflow:hidden;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

但当我尝试合并这两种想法时，我的形状完全崩溃，或者没有动画：

---

有什么想法吗？

问题在于你正在使用的边框，它会推送内容，这就是为什么你看不到你的动画，不是因为它坏了，而是因为你只能看到边框

我建议您使用一个包装器，找到一种合适的技术来塑造包装器，然后将其插入液体模板中

我把你的代码更新到。首先，我使用

transform:rotate（45度）将包装旋转到
45度
然后我以相反的角度旋转元素：
变换：旋转（-45度）用于包装器上的补偿转换

您可以通过不同的方式实现此行为，但请尝试使用变换或
边框半径
，甚至
框阴影
，任何不推动内部的元素
内容

您可以找到几个可以使用
边界半径
实现的形状，并将它们与变换相结合，就像我旋转包装器和对内部元素进行相反操作一样

更新：

修复了工作示例，没有正确导入jQuery
这是您想要的吗：

（很抱歉，我没有提供更多细节，因为我不得不改变很多东西。基本上，你的“杯子”没有高度，所以你看不到波浪。无论如何，我做了更多的改变。）

以下是您的新CSS：

body {
    padding: 0;
    margin: 0 10px;
    background: black;
}

#foam {
    margin-top: 20px;
    background: white;
    width: 460px;
    height: 100px;
    z-index:1;
}

#liquid {
    background: #000;
    width: 460px; height: 500px;
    position: relative;
    clip:auto;
    overflow:hidden;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    z-index:2;
    background-image: 
    -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(0,50,150)),
      color-stop(0.50, rgb(0,150,255))
    );
}

#liquid:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 500px 80px 0 0;
    border-color: #000000 transparent transparent transparent;
    z-index: 10;
}
#liquid:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 500px 0;
    border-color: transparent #000000 transparent transparent;
    z-index: 10;
}

.wave{
    bottom:0;
    background:#fff;
    display:inline-block;
    height:10%;
    width:10px;
    position:absolute;
    -webkit-animation-name:             dostuff; 
    -webkit-animation-duration:         3s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: ease-in-out;
    z-index:3;
}


@-webkit-keyframes dostuff{
    0%, 100% {
        height:10%;
    }
    50% { 
        height:20%;
    }
}

你是否意识到你想要的动画代码只能在基于webkit的浏览器中工作？当我在Firefox中查看它时，我一时对您想要实现的目标感到困惑，直到我看到使用webkit前缀的代码。