Insert animation into div form

Question

I have to admit that I am less than a genius in CSS ... To practice, I create an animation that mimics a beer glass.

At the moment, looking at some examples, I have achieved the desired animation: http://jsfiddle.net/yfb1fo8c/1/

And the form I want:

#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);
}

But when I try to combine both ideas, my form completely crashes or is not animated: http://jsfiddle.net/ogpqj2kr/2/

Any ideas?

Answer 1

This is what you want: http://jsfiddle.net/Paf_Sebastien/cqa7rfu7/ ?

(, , . , "" , . , .)

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%;
    }
}

Answer 2

, , , , .

, , .

. 45deg transform: rotate(45deg);, : transform: rotate(-45deg); .

-, border-radius, box-shadow, ,

, , border-radius ,

Update:

, jQuery