beer-svg-animation/style.css

body {
  background: #131313;
}
.lines {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.schaum {
  fill: #F15A24;
}
.outline {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.beer {
  fill: #FF00FF;
}
.handle {
  fill: none;
  stroke: #4d4d4d;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

/*** Animation ***/
/* Outline */
.outline {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: outlinedash 6s linear infinite;
}

@keyframes outlinedash {
  5% {
    stroke-dashoffset: 1500;
  }
  45% {
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dashoffset: 0;
  }
  95% {
    stroke-dashoffset: 1500;
  }
}

/* Handle */
.handle {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: handledash 6s linear infinite;
}

@keyframes handledash {
  10% {
    stroke-dashoffset: 300;
  }
  20% {
    stroke-dashoffset: 300;
  }
  23% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 0;
  }
  77% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-dashoffset: 300;
  }
  90% {
    stroke-dashoffset: 300;
  }
}

/* Lines */
.lines {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: linedash 6s linear infinite;
}

@keyframes linedash {
  5% {
    stroke-dashoffset: 100;
  }
  10% {
    stroke-dashoffset: 0;
  }
  90% {
    stroke-dashoffset: 0;
  }
  95% {
    stroke-dashoffset: 100;
  }
}

/* Schaum */
.schaum {
  fill: #131313;
  animation: fillschaum 6s linear infinite;
}

@keyframes fillschaum {
  40% {
    fill: #131313;
  }
  45% {
    fill: #FFFFFF;
  }
  55% {
    fill: #FFFFFF;
  }
  60% {
    fill: #131313;
  }
}

/* Beer */
.beer {
  fill: #131313;
  animation: fillbeer 6s linear infinite;
}
@keyframes fillbeer {
  40% {
    fill: #131313;
  }
  45% {
    fill: #DEB712;
  }
  55% {
    fill: #DEB712;
  }
  60% {
    fill: #131313;
  }
}