<div id="coffee-wrap">
    
        <span class="stars star1"></span>
        <span class="stars star2"></span>
        <span class="stars star3"></span>

        <div class="machine">
            <svg class="svg-machine" preserveAspectRatio="none" viewBox="0 0 172.562 284.959" enable-background="new 0 0 172.562 284.959">
                <g id="base">
                    <polyline fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" points="31.58,278.213 
                        5.646,278.213 5.646,240.035 165.396,240.035 165.396,278.213 72.332,278.213  "/>
                    
                        <line fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" x1="48.896" y1="278" x2="55.896" y2="278"/>
                </g>
                <g id="body-machine">
                    <path fill="#FFFFFF" d="M30.896,238.75c-3.313,0-6-2.687-6-6v-154c0-33.222,27.028-60.25,60.25-60.25s60.25,27.028,60.25,60.25v154
                        c0,3.313-2.687,6-6,6H30.896z"/>
                    <path d="M85.146,24.5c29.961,0,54.25,24.289,54.25,54.25v154h-108.5v-154C30.896,48.788,55.185,24.5,85.146,24.5 M85.146,12.5
                        c-36.53,0-66.25,29.72-66.25,66.25v154c0,6.627,5.373,12,12,12h108.5c6.627,0,12-5.373,12-12v-154
                        C151.396,42.219,121.677,12.5,85.146,12.5L85.146,12.5z"/>
                </g>
                <path id="alca-machine" d="M99.562,10v6c0,0-11.25-2-15-2c-3.5,0-14,2-14,2v-6H99.562 M99.562,0h-29c-5.523,0-10,4.477-10,10v6
                    c0,2.979,1.329,5.804,3.625,7.704C65.995,25.2,68.255,26,70.563,26c0.622,0,1.248-0.058,1.869-0.176
                    C77.486,24.862,83.156,24.01,84.565,24c1.713,0,8.233,0.954,13.247,1.846C98.395,25.949,98.98,26,99.562,26
                    c2.33,0,4.608-0.815,6.423-2.335c2.268-1.9,3.577-4.707,3.577-7.665v-6C109.562,4.477,105.085,0,99.562,0L99.562,0z"/>
                <g id="top-machine">
                    <g>
                        <path fill="#F52929" d="M28.896,106.896V80.271c0-31.02,25.146-56.167,56.166-56.167l0,0c31.021,0,56.168,25.146,56.168,56.167
                            v26.624H28.896z"/>
                    </g>
                    
                        <rect x="46.563" y="33.999" transform="matrix(0.8093 -0.5874 0.5874 0.8093 -17.8288 42.0796)" fill="#FFFFFF" width="18.667" height="29"/>
                    <path fill="#A4001F" d="M120.562,35.333c0,0-40.332,17-27.666,73.667l50.334,1.333L142.562,69l-7.332-20.333L120.562,35.333z"/>
                    <g>
                        <g>
                            <path d="M85.062,25.333c30.1,0,54.5,24.4,54.5,54.5v25.834h-109V79.833C30.562,49.733,54.963,25.333,85.062,25.333
                                 M85.062,17.333c-34.463,0-62.5,28.038-62.5,62.5v25.834v8h8h109h8v-8V79.833C147.562,45.371,119.525,17.333,85.062,17.333
                                L85.062,17.333z"/>
                        </g>
                    </g>
                </g>
                <g id="deco-blue">
                    <rect x="26.896" y="221.524" fill="#66CCFF" width="116.526" height="17.809"/>
                    <g>
                        <path d="M139.422,225.524v9.809H30.896v-9.809H139.422 M147.422,217.524h-8H30.896h-8v8v9.809v8h8h108.526h8v-8v-9.809V217.524
                            L147.422,217.524z"/>
                    </g>
                </g>
                
                <g id="head-machine">
                    <g>
                        <path fill="#FFFFFF" d="M129.308,83.719c0,7.271-2.324,16.378-7.902,23.886c-12.729,17.135-35.302,30.91-35.302,30.91
                            s-24.663-14.388-37.057-32.666c-4.511-6.652-6.147-15.762-6.147-22.13c0-23.861,19.343-43.204,43.204-43.204
                            S129.308,59.858,129.308,83.719z"/>
                    </g>
                    <path fill="#66CCFF" d="M91.062,39.166c0,0,7.769,4.807,14.5,13.25c6.137,7.698,11.309,18.519,11,29.5c-0.75,26.75-16,41-22.75,49
                        c0,0,28.75-19.5,32-30s7-28.25-0.25-40.75S91.062,39.166,91.062,39.166z"/>
                    <g>
                        <path d="M85.229,41.249c22.644,0,41,18.356,41,41c0,6.899-2.206,15.542-7.499,22.667c-12.079,16.261-33.501,29.333-33.501,29.333
                            s-23.404-13.654-35.166-31c-4.281-6.313-5.834-14.958-5.834-21C44.229,59.605,62.585,41.249,85.229,41.249 M85.229,33.249
                            c-27.019,0-49,21.981-49,49c0,3.485,0.521,15.622,7.213,25.491c12.637,18.635,36.736,32.824,37.756,33.419
                            c1.246,0.727,2.64,1.09,4.031,1.09c1.445,0,2.889-0.391,4.167-1.171c0.929-0.567,22.897-14.082,35.756-31.392
                            c5.769-7.765,9.077-17.766,9.077-27.438C134.229,55.23,112.247,33.249,85.229,33.249L85.229,33.249z"/>
                    </g>
                    <circle class="olhos" cx="66.396" cy="78.666" r="4.167"/>
                    <circle class="olhos" cx="103.396" cy="78.666" r="4.167"/>
                    <g id="boca-pronto">
                        <path d="M85.646,109.833c-6.167,0-10.417-5.25-10.417-10.833c0-1.657,1.343-3,3-3h14c1.657,0,3,1.343,3,3
                            C95.229,104.167,92.062,109.833,85.646,109.833z"/>
                        <path fill="#FE4242" d="M85.463,107.5c-3.449,0-5.828-1.676-5.828-3.459c0-0.529,0.751-0.958,1.68-0.958h7.83
                            c0.929,0,1.68,0.429,1.68,0.958C90.824,105.691,89.053,107.5,85.463,107.5z"/>
                    </g>
                    <circle id="boca-encher" cx="85.229" cy="104.333" r="2.666"/>
                    <g id="boca-sopro">
                        <path display="inline" d="M89.086,104.413c-1.794,0-3.2-0.697-3.954-1.857c-0.784,1.103-2.181,1.776-3.91,1.776
                            c-2.618,0-4.31-1.595-4.31-4.064c0-0.359,0.291-0.65,0.65-0.65s0.65,0.291,0.65,0.65c0,1.731,1.125,2.764,3.009,2.764
                            c1.522,0,3.301-0.712,3.301-2.718c0-0.359,0.291-0.65,0.65-0.65s0.65,0.291,0.65,0.65c0,2.087,1.758,2.799,3.263,2.799
                            c1.906,0,3.091-1.08,3.091-2.818c0-0.359,0.291-0.65,0.65-0.65s0.65,0.291,0.65,0.65
                            C93.478,102.758,91.713,104.413,89.086,104.413z"/>
                    </g>
                </g>
            </svg>
        </div>

        <div id="hot-coffee-wrap">
            <svg preserveAspectRatio="none" width="20px" height="100px" enable-background="new 0 0 24 98">
                <path id="hot-coffee-down" fill="#AB4D37" d="M16-432.954v-0.38c0-0.885,0-1.672-1-2.221v-11.779c0-0.504,0-0.958,0-1.31v-9.19c0-0.442,0-0.836-1-1.111
                v-9.389c0-0.552-0.447-1-1-1c-0.552,0-1,0.448-1,1v9.389c0,0.274,0,0.668,0,1.111v9.19c0,0.352-1,0.806-1,1.31v11.779
                c0,0.549-1,1.336-1,2.221v0.38c0,0.703-1,1.613-1,2.62v341.75c0,1.518,1,2.821,2,3.5v7.156c0,0.189,0,0.386,0,0.595v49.75
                c0,0.504,1,0.958,1,1.31v11.69c0,0.442,0,0.836,0,1.111v11.889c0,0.553,0.448,1,1,1c0.553,0,1-0.447,1-1v-11.89
                c1-0.274,1-0.668,1-1.11v-11.69c0-0.352,0-0.806,0-1.31v-49.75c0-0.208,0-0.404,0-0.593v-7.158c1-0.678,2-1.982,2-3.499v-341.75
                C17-431.341,17-432.251,16-432.954z"/>
            </svg>

            <span class="last-drop"></span>

        </div>

        <div class="mug mug1 mug-empty">
            <svg class="svg-mug" preserveAspectRatio="none" viewBox="0 0 72 77" enable-background="new 0 0 72 77">
                
                <g opacity="0.6">
                    <polygon fill="#9999D1" points="52.5,5 48.834,70 57.5,70 67,8.5 62.667,3.834 53.667,3.667   "/>
                </g>
                <path fill="#FFFFFF" d="M23.452,47.76c0.176,1.276-0.717,2.454-1.994,2.63l0,0c-1.276,0.176-2.454-0.717-2.629-1.994l-4.225-30.711
                    c-0.176-1.275,0.717-2.453,1.994-2.629l0,0c1.276-0.176,2.454,0.717,2.629,1.993L23.452,47.76z"/>
                <path fill="#FFFFFF" d="M25.349,59.106c0.201,1.459-0.819,2.806-2.278,3.006l0,0c-1.458,0.201-2.804-0.819-3.005-2.278l-0.272-1.981
                    c-0.201-1.459,0.819-2.804,2.278-3.005l0,0c1.459-0.2,2.805,0.819,3.005,2.278L25.349,59.106z"/>
                <path d="M61,8c1.656,0,3,1.343,3,3l-7,54.667c0,1.657-1.344,3-3,3H19c-1.657,0-3-1.343-3-3L8,11c0-1.657,1.343-3,3-3H61 M61,0H11
                    C4.934,0,0,4.935,0,11v0.582l0.084,0.576l7.941,54.269c0.392,5.712,5.164,10.24,10.974,10.24h35c5.842,0,10.635-4.578,10.98-10.334
                    l6.955-54.317L72,11.51V11C72,4.935,67.065,0,61,0L61,0z"/>
            </svg>
        </div>
        <div class="mug mug2">
            <svg class="svg-mug" preserveAspectRatio="none" viewBox="0 0 72 77" enable-background="new 0 0 72 77">
                <g opacity="0.6">
                    <polygon fill="#9999D1" points="52.5,5 48.834,70 57.5,70 67,8.5 62.667,3.834 53.667,3.667   "/>
                </g>
                <path fill="#FFFFFF" d="M23.452,47.76c0.176,1.276-0.717,2.454-1.994,2.63l0,0c-1.276,0.176-2.454-0.717-2.629-1.994l-4.225-30.711
                    c-0.176-1.275,0.717-2.453,1.994-2.629l0,0c1.276-0.176,2.454,0.717,2.629,1.993L23.452,47.76z"/>
                <path fill="#FFFFFF" d="M25.349,59.106c0.201,1.459-0.819,2.806-2.278,3.006l0,0c-1.458,0.201-2.804-0.819-3.005-2.278l-0.272-1.981
                    c-0.201-1.459,0.819-2.804,2.278-3.005l0,0c1.459-0.2,2.805,0.819,3.005,2.278L25.349,59.106z"/>
                <path d="M61,8c1.656,0,3,1.343,3,3l-7,54.667c0,1.657-1.344,3-3,3H19c-1.657,0-3-1.343-3-3L8,11c0-1.657,1.343-3,3-3H61 M61,0H11
                    C4.934,0,0,4.935,0,11v0.582l0.084,0.576l7.941,54.269c0.392,5.712,5.164,10.24,10.974,10.24h35c5.842,0,10.635-4.578,10.98-10.334
                    l6.955-54.317L72,11.51V11C72,4.935,67.065,0,61,0L61,0z"/>
            </svg>
        </div>
        <div class="mug mug3">
            <svg class="svg-mug" preserveAspectRatio="none" viewBox="0 0 72 77" enable-background="new 0 0 72 77">
                <g>
                    <defs>
                        <path id="SVGID_1_" d="M57,65.666c0,1.656-1.344,3.001-3,3.001H19c-1.657,0-3-1.345-3-3.001L8,11.001C8,9.345,9.343,8,11,8h50
                            c1.656,0,3,1.345,3,3.001L57,65.666z"/>
                    </defs>
                    <clipPath id="SVGID_2_">
                        <use xlink:href="#SVGID_1_"  overflow="visible"/>
                    </clipPath>
                    <rect x="6.339" class="coffee" y="30" clip-path="url(#SVGID_2_)" fill="#AB4D37" width="57.167" height="47"/>
                    <rect x="5.108" class="cream" y="20.978" clip-path="url(#SVGID_2_)" fill="#FFCC66" width="59" height="10"/>
                </g>
                <g opacity="0.6">
                    <polygon fill="#9999D1" points="52.5,5 48.834,70 57.5,70 67,8.5 62.667,3.834 53.667,3.667   "/>
                </g>
                <path fill="#FFFFFF" d="M23.452,47.76c0.176,1.276-0.717,2.454-1.994,2.63l0,0c-1.276,0.176-2.454-0.717-2.629-1.994l-4.225-30.711
                    c-0.176-1.275,0.717-2.453,1.994-2.629l0,0c1.276-0.176,2.454,0.717,2.629,1.993L23.452,47.76z"/>
                <path fill="#FFFFFF" d="M25.349,59.106c0.201,1.459-0.819,2.806-2.278,3.006l0,0c-1.458,0.201-2.804-0.819-3.005-2.278l-0.272-1.981
                    c-0.201-1.459,0.819-2.804,2.278-3.005l0,0c1.459-0.2,2.805,0.819,3.005,2.278L25.349,59.106z"/>
                <path d="M61,8c1.656,0,3,1.343,3,3l-7,54.667c0,1.657-1.344,3-3,3H19c-1.657,0-3-1.343-3-3L8,11c0-1.657,1.343-3,3-3H61 M61,0H11
                    C4.934,0,0,4.935,0,11v0.582l0.084,0.576l7.941,54.269c0.392,5.712,5.164,10.24,10.974,10.24h35c5.842,0,10.635-4.578,10.98-10.334
                    l6.955-54.317L72,11.51V11C72,4.935,67.065,0,61,0L61,0z"/>
            </svg>
        </div>
        <div class="mug mug4">
            <svg class="svg-mug" preserveAspectRatio="none" viewBox="0 0 72 77" enable-background="new 0 0 72 77">
                <g>
                    <defs>
                        <path id="SVGID_1_" d="M57,65.666c0,1.656-1.344,3.001-3,3.001H19c-1.657,0-3-1.345-3-3.001L8,11.001C8,9.345,9.343,8,11,8h50
                            c1.656,0,3,1.345,3,3.001L57,65.666z"/>
                    </defs>
                    <clipPath id="SVGID_2_">
                        <use xlink:href="#SVGID_1_"  overflow="visible"/>
                    </clipPath>
                    <rect x="6.339" y="30" clip-path="url(#SVGID_2_)" fill="#AB4D37" width="57.167" height="47"/>
                    <rect x="5.108" y="20.978" clip-path="url(#SVGID_2_)" fill="#FFCC66" width="59" height="10"/>
                </g>
                <g opacity="0.6">
                    <polygon fill="#9999D1" points="52.5,5 48.834,70 57.5,70 67,8.5 62.667,3.834 53.667,3.667   "/>
                </g>
                <path fill="#FFFFFF" d="M23.452,47.76c0.176,1.276-0.717,2.454-1.994,2.63l0,0c-1.276,0.176-2.454-0.717-2.629-1.994l-4.225-30.711
                    c-0.176-1.275,0.717-2.453,1.994-2.629l0,0c1.276-0.176,2.454,0.717,2.629,1.993L23.452,47.76z"/>
                <path fill="#FFFFFF" d="M25.349,59.106c0.201,1.459-0.819,2.806-2.278,3.006l0,0c-1.458,0.201-2.804-0.819-3.005-2.278l-0.272-1.981
                    c-0.201-1.459,0.819-2.804,2.278-3.005l0,0c1.459-0.2,2.805,0.819,3.005,2.278L25.349,59.106z"/>
                <path d="M61,8c1.656,0,3,1.343,3,3l-7,54.667c0,1.657-1.344,3-3,3H19c-1.657,0-3-1.343-3-3L8,11c0-1.657,1.343-3,3-3H61 M61,0H11
                    C4.934,0,0,4.935,0,11v0.582l0.084,0.576l7.941,54.269c0.392,5.712,5.164,10.24,10.974,10.24h35c5.842,0,10.635-4.578,10.98-10.334
                    l6.955-54.317L72,11.51V11C72,4.935,67.065,0,61,0L61,0z"/>
            </svg>
        </div>
        
        <div class="floor">
            <svg preserveAspectRatio="none" viewBox="0 0 528 10" enable-background="new 0 0 528 10">
                <g>
                    <path fill="#CCCCCC" d="M46.074,5.171c0,2.117-1.716,3.834-3.833,3.834H3.907c-2.117,0-3.833-1.717-3.833-3.834l0,0
                        c0-2.117,1.716-3.833,3.833-3.833H42.24C44.357,1.338,46.074,3.054,46.074,5.171L46.074,5.171z"/>
                    <path fill="#CCCCCC" d="M506.072,5.338c0,2.209-1.791,4-4,4h-442c-2.209,0-4-1.791-4-4l0,0c0-2.209,1.791-4,4-4h442
                        C504.281,1.338,506.072,3.129,506.072,5.338L506.072,5.338z"/>
                    <path fill="#CCCCCC" d="M527.99,5.15c0,2.105-1.707,3.812-3.812,3.812h-6.707c-2.105,0-3.812-1.707-3.812-3.812l0,0
                        c0-2.105,1.707-3.812,3.812-3.812h6.707C526.283,1.338,527.99,3.045,527.99,5.15L527.99,5.15z"/>
                </g>
            </svg>

        </div>

    </div>
/*
Svg Projects
Author: Jonathan Trancozo
Author_url: portfolio.jonathansilva.com.br/
Project_url: http://jonathansilva.com.br/lab/gifs/coffee.html
Language: HTML, CSS3 and SVG
Project_version: V1
Project_description: 
[pt-br]
Um belo dia Decidi melhorar minhas habilidades como desenvolvedor web, então comecei a criar projetos desafiadores para testar o que eu sabia fazer.

Essa animação é uma tentativa de recriar o projeto original de Gal Shir [Coffee Machine] https://dribbble.com/shots/2513703-Coffee-Machine.

Fiquei satisfeito com o resultado para o primeiro projeto.

Espero em breve conseguir realizar animações mais complexas e desafiadoras.

Até uma próxima.
      

[en]
One day I decided to improve my skills as a web developer, so I started to create challenging projects to test what I could do.

This animation is an attempt to recreate the original design Shir Gal [Coffee Machine]  https://dribbble.com/shots/2513703-Coffee-Machine.

I was pleased with the result for the first project.

I hope to soon be able to perform more complex and challenging animations.

See you.

*/

html {
    font-size: 1em;
    line-height: 1.4;
}


html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

#coffee-wrap {
    width: 800px;
    height: 350px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mug,
.machine,
.floor {
    position: absolute;
}

.mug {
    width: 72px;
    height: 77px;
    bottom: 6px;
    z-index: 4;
}

.mug1 {
    opacity: 1;
    right: 100px;
    animation: new-mug 3.5s ease infinite;
}

.mug2 {
    opacity: 1;
    right: 220px;
    animation: jump-to-machine 3.5s linear infinite;
}

.mug3 {
    right: 377px;
    bottom: 46px;
    animation: filled-out 3.5s ease infinite;
}

.mug4{
    right: 540px;
    animation: go-out 3.5s ease infinite;
}

.svg-mug {
    width: 100%;
    height: 100%;
}

.mug .cream {
    animation: mug-fill-cream 3.5s ease infinite;
}

.mug .coffee {
    animation: mug-fill-coffee 3.5s ease infinite;
}

.machine {
    width: 173px;
    height: 285px;
    bottom: 6px;
    left: 300px;
    z-index: 2;
    transform: scale(1);
    transform-origin: bottom center;
    animation: machine-coffee 3.5s ease infinite;
}

#hot-coffee-wrap {
    position: absolute;
    bottom: 56px;
    right: 408px;
    height: 100px;
    width: 20px;
    overflow: hidden;
    z-index: 2;
    animation: hot-coffee-wrap 3.5s ease infinite;
}

.last-drop {
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 8px;
    border-radius: 50%;
    background: #AB4D37;
    animation: last-drop 3.5s ease infinite;
}

#hot-coffee-down {
    transform: translateY(0);
    animation: hot-coffee-down 3.5s ease infinite;
}

.olhos {
    animation: olhos 3.5s ease infinite;
}

#boca-encher {
    animation: boca-encher 3.5s ease infinite;
}

#boca-sopro {
    opacity: 0;
    animation: boca-sopro 3.5s ease infinite;
}

#boca-pronto {
    opacity: 0;
    animation: boca-pronto 3.5s ease infinite;
}

.svg-machine {
    width: 100%;
    height: 100%;
}

.stars {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 20%;
    background: #F9D67D;
    opacity: 0;
    bottom: 0;
    left: 0;
}

.star1 {
    opacity: 0;
    transform: translate(500px, -120px) scale(0.2);
    animation: star1 3.5s ease infinite;
}

.star2 {
    opacity: 0;
    transform: translate(280px, -170px) scale(0.2);
    animation: star2 3.5s ease infinite;
}

.star3 {
    opacity: 0;
    transform: translate(500px, -250px) scale(0.2);
    animation: star3 3.5s ease infinite;
}



/* Floor */
.floor {
    width: 538px;
    height: 10px;
    bottom: 6px;
    left: 120px;
    z-index: 0;
}

.svg-floor {
    width: 100%;
    height: 100%;
}

/* MUG 1 */

@keyframes new-mug {
    0% {
        opacity: 1;
        right: 220px;
    }

    21.25% {
        opacity: 1;
        right: 220px;
    }
    21.30% {
        opacity: 0;
        right: 100px;
    }
    31.25% {
        opacity: 0;
        right: 100px;
    }

    34% {
        opacity: 1;
    }

    37.5% {
        right: 220px;
    }
    100% {
        opacity: 1;
        right: 220px;
    }

}


/* MUG 2 */

@keyframes jump-to-machine {
    
    0% {
        opacity: 0;
    }

    21.2% {
        opacity: 0;
    }

    21.25% {
        opacity: 1;
        bottom: 6px;
        right: 220px;
    }
    
    39.95% {
        opacity: 1;
        bottom: 46px;
        right: 377px;
    }
    40% {
        opacity: 0;
        bottom: 6px;
        right: 220px;
    }

}

/* MUG 3 */

@keyframes mug-fill-coffee {
    0% {
        y: 30;
        height: 47px;
        opacity: 1;
    }

    30% {
        y: 30;
        height: 47px;
        opacity: 1;
    }
    30.1% {
        opacity: 0;
        y: 70;
        height: 0px;
    }
    40.9% {
        opacity: 0;
    }
    41% {
        opacity: 1;
        y: 70;
        height: 0px;
    }

    80% {
        y: 30;
        height: 47px;
        opacity: 1;
    }

    100% {
        y: 30;
        height: 47px;
        opacity: 1;
    }
}

@keyframes mug-fill-cream {
    0% {
        y: 20;
        height: 10px;
        opacity: 1;
    }

    30% {
        y: 20;
        height: 10px;
        opacity: 1;
    }
    30.1% {
        y: 70;
        height: 0px;
        opacity: 1;
    }
    41% {
        y: 70;
        height: 0px;
        opacity: 1;
    }

    80% {
        y: 20;
        height: 10px;
        opacity: 1;
    }

    100% {
        y: 20;
        height: 10px;
        opacity: 1;
    }


}

@keyframes filled-out {
    0% {
        opacity: 1;
    }
    10% {
        bottom: 46px;
        right: 377px;
        opacity: 1;
    }
    30% {
        bottom: 6px;
        right: 540px;
        opacity: 1;
    }
    30.1% {
        opacity: 0;
    }
    39.9% {
        opacity: 0;
        bottom: 46px;
        right: 377px;
    }
    40% { opacity: 1; }
    100% { opacity: 1; }

}


/* MUG 4 */

@keyframes go-out {
    0% {
        opacity: 1;
    }
    7% {
        bottom: 6px;
        right: 540px;
        opacity: 1;
    }
    13% {
        bottom: 6px;
        right: 620px;
        opacity: 0;
    }
    30%  { opacity: 0; right: 540px; }
    30.1%  { opacity: 1 }
    100% { opacity: 1}
}

/* Coffee */


@keyframes hot-coffee-wrap {
    0% {
       
        
    }
    39% {

    }
    40% {
        height: 105px;
    }

    70% {
        height: 84px;
        
    }

    71% {

       
    }
}

@keyframes hot-coffee-down {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    39% {
         opacity: 0;
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
         opacity: 1;
        transform: translateY(600px);
    }

    71% {
        opacity: 0;
        transform: translateY(0);
    }
}

@keyframes last-drop {
    0% {
        opacity: 0;
    }

    64% {
        opacity: 0;
        transform: translateY(0);
    }

    66% {
        opacity: 1;
    }

    71% {
        opacity: 1;
        transform: translateY(-40px);
    }
    
    76% {
        opacity: 1;
        transform: translateY(0px);
    }

    77% {
        opacity: 0;
    }
    100% {
       opacity: 0;
    }

}



/* Machine */

@keyframes machine-coffee {
    0% {
        
    }

    25% {
        /*width: 165px;
        height: 300px;
        margin-left: 0;*/
        transform: scale(0.95, 1.07);
    }

    40% {
       /*width: 165px;
        height: 300px;
        margin-left: 0;*/
        transform: scale(0.95, 1.07);
    }


    75% {
        /*width: 183px;
        height: 265px;*/
        transform: scale(1.05, 0.92);
    }

    100% {
        
    }
}

@keyframes olhos {
    3.75% {
        /* cy: 78.666; */
        opacity: 1;
    }
    3.80% { opacity: 0; }
    6% { opacity: 0; }
    6.1% { opacity: 1; }

    10% {
        /*cy: 74.666;*/
    }

    25% {
        
    }

    40% {
        /*cy: 74.666;*/
    }
    71% {
        /*cy: 83.666;*/
    }

    89% {
        /*opacity: 1;*/
    }
    90% {
        /*opacity: 0;*/
    }

    93% {
        /*opacity: 0;*/
    }
    94% {
        /*opacity: 1;*/
    }

    100% {
        
    }
}

@keyframes boca-encher {
    0% {
        opacity: 1;
        r: 2.666;
    }

    30% {
        r: 14;
        opacity: 1;
    }

    38% {
        r: 14;
        opacity: 1;
    }
    39% {
        opacity: 0;
    }

    25% {
        
    }

    40% {
        
    }


    75% {
        
    }

    100% {
         opacity: 0;
    }
}

@keyframes boca-sopro {
    0% {
        opacity: 0;
    }

    38% {
        opacity: 0;
    }
    39% {
        opacity: 1;
        transform: translateY(0);
    }

    74% {
        opacity: 1;
        transform: translateY(12px);
    }
    75% {
        opacity: 0;
    }
}

@keyframes boca-pronto {
    0% { opacity: 0; }
    74% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes star1 {
    0% { opacity: 0; }
    28% { opacity: 0; }
    30% {
        opacity: 1;
        transform: translate(500px, -120px) scale(0.2) rotate(-45deg);
    }
    40% {
        opacity: 1;
        transform: translate(500px, -120px) scale(1) rotate(-45deg);
    }
    50% {
        transform: translate(500px, -120px) scale(0.2) rotate(-45deg); 
        opacity: 1;
    }
    51% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes star2 {
    0% { opacity: 0; }
    43% { opacity: 0; }
    45% {
        opacity: 1;
        transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
    }
    55% {
        opacity: 1;
        transform: translate(280px, -170px) scale(1) rotate(-45deg);
    }
    65% {
        transform: translate(280px, -170px) scale(0.2) rotate(-45deg);
        opacity: 1;
    }
    66% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes star3 {
    0% { opacity: 0; }
    53% { opacity: 0; }
    55% {
        opacity: 1;
        transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
    } 
    65% {
        opacity: 1;
        transform: translate(500px, -210px) scale(1) rotate(-45deg);
    }
    75% {
        transform: translate(500px, -210px) scale(0.2) rotate(-45deg);
        opacity: 1;
    }
    76% { opacity: 0; }
    100% { opacity: 0; }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.