@-webkit-keyframes is-active {
  0% {
    fill: auto;
  }
  5% {
    fill: white;
  }
  100% {
    fill: auto;
  }
}
@keyframes is-active {
  0% {
    fill: auto;
  }
  5% {
    fill: white;
  }
  100% {
    fill: auto;
  }
}
#tanuki-logo {
  width: 50%;
  max-width: 600px;
  margin: 0 auto;
}

.is-active #tanuki-right-cheek {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.is-active #tanuki-right-eye {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
}
.is-active #tanuki-right-ear {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
}
.is-active #tanuki-nose {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}
.is-active #tanuki-left-eye {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.is-active #tanuki-left-ear {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.is-active #tanuki-left-cheek {
  -webkit-animation: is-active 2s infinite;
          animation: is-active 2s infinite;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

body {
  background: #333333;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 1;
          flex: 1;
  min-height: 100vh;
}