Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<head>
  <title>Pokemon Amie ❤️</title>
</head>

<body>
      <div class="mobile-block">
        <h3>Eevee isn't ready to play on mobile yet.</h3>
        <p>Try visiting Eevee on desktop!</p>
      </div>
  <div class="container">
    <div class="sky"></div>
    <div class="grass"></div>
<!--     <div class="grass">
            <ul class="flowers">
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
      </ul>
      <ul class="flowers">
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
      </ul>
      <ul class="flowers">
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
        <li class="flower"></li>
      </ul> 
    </div> -->
    <div class="hearts">
      <div class="heart"></div>
      <div class="heart"></div>
      <div class="heart"></div>
    </div>
    <div class="eevee no-pet">
      <div class="legs">
        <div class="leg">
          <div class="paw"></div>
        </div>
        <div class="leg">
          <div class="paw"></div>
        </div>
      </div>
      <div class="chest">
        <div class="fur">
          <div class="hairs"></div>
        </div>
        <div class="fur">
          <div class="hairs"></div>
        </div>
        <div class="fur">
          <div class="hairs"></div>
        </div>
      </div>
      <div class="ears">
        <div class="ear">
          <div class="ear-lobe"></div>
        </div>
        <div class="ear">
          <div class="ear-lobe"></div>
        </div>
      </div>
      <div class="head">
        <div class="face">
          <div class="blink is-visible">
            <div class="blink-eye"></div>
            <div class="blink-eye"></div>
          </div>
          <div class="eyes is-visible">
            <div class="eye"></div>
            <div class="eye"></div>
          </div>
          <div class="closed">
            <div class="closed-eye"></div>
            <div class="closed-eye"></div>
          </div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
      </div>
    </div>
    <div class="happy"></div>
  </div>
</body>

</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

$white: #fffaf0;
$scene-size: 450px;
$sky-gradient: #ffffff 40%, #6dd5fa, #2980b9;
$sky-mobile-gradient: #ffffff, #6dd5fa, #2980b9;
$sky-polkadots: #c6e4ff 20%, transparent 0;
$grass-gradient: #38ef7d, #11998e;
$grass-drop-shadow: #33db73;
$flowers: #f54291, #ff78ae, #ffa0d2, #f2bd1d, #fff8cd, #38ef7d;
// $bubble-pink: pink, '❤', 20%, 12%, red;
// $bubble-white: white, '♪', 30%, 0, black;
// $bubble-blue: #c6e4ff, '♫', 30%, 20%, black;
// $bubbles:  $bubble-pink, $bubble-white, $bubble-blue;
$numFlowers: 36;

// Eevee
$eevee-eye: #332011;
$eevee-eye-light: lighten(#633c15, 10%); //#C5915D;
$eevee-eye-light-2: #ad8052;
$fur-border: rgb(192, 118, 44);

@function randomNum($min, $max) {
  $random: random();
  @return ($min + floor($random * (($max - $min) + 1)));
}

@mixin bubbleStyles() {
  $index: randomNum(1, length($bubbles));
  $list: nth($bubbles, $index);

  content: "#{nth($list, 1)}";
  font-size: 3em;
  left: nth($list, 2);
  top: nth($list, 3);
  color: nth($list, 4);
  z-index: 2;
  transform: rotate(-70deg);
}
// https://www.sitepoint.com/sass-multiple-arguments-lists-or-arglist/
// mixin for creating linear gradients with multiple color stops
@mixin linear-gradient($direction: null, $gradients...) {
  @if (type-of($direction) == "string") {
    $direction: unquote($direction);
  }
  background-color: nth($gradients, 2);
  background-image: -webkit-linear-gradient($direction, $gradients...);
  background-image: linear-gradient($direction, $gradients...);
}

@mixin radial-gradient($direction: null, $gradients...) {
  @if (type-of($direction) == "string") {
    $direction: unquote($direction);
  }
  background-color: nth($gradients, 1);
  background-image: -webkit-radial-gradient($direction, $gradients...);
  background-image: radial-gradient($direction, $gradients...);
}

@mixin oval($size) {
  $half: $size/2;
  $quarter: $half/2;
  width: $size;
  height: $half;
  border-top-left-radius: $half $quarter;
  border-top-right-radius: $half $quarter;
  border-bottom-left-radius: $half $quarter;
  border-bottom-right-radius: $half $quarter;
}

@mixin centerX($size) {
  left: calc(50% - ($size / 2));
}

@mixin flowers() {
  @for $i from 1 through $numFlowers {
    $size: randomNum(3px, 8px);
    $top: randomNum(0px, 20px);
    $left: randomNum(0px, 50px);
    $color: randomNum(1, length($flowers));

    &:nth-child(#{$i}) {
      @include oval($size);
      background-color: nth($flowers, $color);
      top: $top;
      left: $left;
    }
  }
}

html,
body {
  background-color: $white;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

* {
  position: absolute;

  &:before,
  &:after {
    content: "";
    position: absolute;
  }
}

.mobile-block {
  @include linear-gradient("to top", $sky-mobile-gradient...);
  height: 100vh;
  width: 100vw;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Indie Flower', cursive;
  color: #00306e;

  h3, p {
    position: initial;
  }
}

.container {
  @include linear-gradient("to top", $sky-gradient...);
  width: $scene-size;
  height: $scene-size;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  overflow: hidden;

  &:before {
    // produces polkadots as seen in the in game version
    // https://www.clairecodes.com/blog/2018-10-10-css-polka-dot-background/
    width: $scene-size;
    height: $scene-size;
    $size: 50px;
    $pos: $size / 2;
    background-image: -webkit-radial-gradient($sky-polkadots...), -webkit-radial-gradient($sky-polkadots...);
    background-image: radial-gradient($sky-polkadots...), radial-gradient($sky-polkadots...);
    background-size: $size $size;
    background-position: 0 0, $pos $pos;
    mix-blend-mode: color-burn;
    z-index: -2;
  }
}

.grass {
  @include linear-gradient("to bottom", $grass-gradient...);
  box-shadow: 0 -20px 35px $grass-drop-shadow;
  width: 100%;
  top: 60%;
  height: 200px;
  overflow: hidden;
}

// .flowers {
//   @include oval(60px);
//   overflow: hidden;
//   &:nth-child(1) {
//     left: 40px;
//     .flower {
//       @include flowers();
//     }
//   }
//   &:nth-child(2) {
//     left: 300px;
//     top: 10px;
//     .flower {
//       @include flowers();
//     }
//   }
//   &:nth-child(3) {
//     left: 130px;
//     top: 30px;
//     .flower {
//       @include flowers();
//     }
//   }
// }

.eevee {
  width: 350px;
  height: 300px;
  left: calc(50% - (350px / 2));
  top: calc(50% - 100px);

  .ears {
    width: 50%;
    height: 50%;
    top: -20px;
    z-index: -1;
    left: calc(50% - (175px / 2));
    transition: 0.5s ease;
    animation: earBounce 0.5s ease-in-out alternate infinite;
  }

  .ear {
    width: 85%;
    height: 40%;
    left: 25%;
    top: 20%;
    background-color: transparent;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 100%;
    transform-origin: bottom left;
    @include radial-gradient("ellipse 80% 90% at 90% 80%", $eevee-eye-light-2, $eevee-eye);
    border: 8px solid lighten(#c5915d, 10%);
    &:first-child {
      transform: translateX(70px) skewX(-15deg) skewY(5deg) rotate(-20deg);
    }
    &:last-child {
      transform: translateX(20px) rotateY(180deg) skewX(-15deg) skewY(5deg) rotate(-20deg);
    }
  }

  .head {
    width: 140px;
    height: 150px;
    @include radial-gradient("farthest-corner at 50px 30px", rgb(255, 237, 218), rgb(255, 183, 111), rgb(219, 114, 8));
    left: calc(50% - (140px / 2));
    top: 10px;
    border-top-left-radius: 50% 80px;
    border-top-right-radius: 50% 80px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    animation: headBounce 0.5s ease-in-out alternate infinite;
  }

  .face {
    width: 90%;
    height: 70%;
    left: calc(50% - (126px / 2));
    top: 40px;
  }

  .eyes {
    width: 90%;
    height: 50%;
    top: 15px;
    left: calc(50% - (114px / 2));
    display: none;

    &.is-visible {
      display: block;
      animation: blink 4s infinite;
    }
  }

  .eye {
    width: 22%;
    height: 105%;
    background-color: $eevee-eye;
    border: 4px solid $eevee-eye;
    border-bottom-left-radius: 50% 35%;
    border-bottom-right-radius: 50% 35%;
    border-top-right-radius: 50% 60%;
    border-top-left-radius: 50% 60%;
    background-image: -webkit-radial-gradient(
        ellipse 6px 12px at 50% 60%,
        $eevee-eye 0%,
        $eevee-eye 99%,
        transparent 100%
      ),
      -webkit-radial-gradient(ellipse 9px 18px at 50% 95%, $eevee-eye-light-2 0%, $eevee-eye-light-2 99%, transparent
            100%),
      -webkit-radial-gradient(ellipse 12px 24px at 50% 90%, $eevee-eye-light 0%, $eevee-eye-light 99%, transparent 100%),
      -webkit-radial-gradient(ellipse 4px 7px at 37% 20%, $white 0%, $white 99%, transparent 100%);
    background-image: radial-gradient(ellipse 6px 12px at 50% 60%, $eevee-eye 0%, $eevee-eye 99%, transparent 100%),
      radial-gradient(ellipse 9px 18px at 50% 95%, $eevee-eye-light-2 0%, $eevee-eye-light-2 99%, transparent 100%),
      radial-gradient(ellipse 12px 24px at 50% 90%, $eevee-eye-light 0%, $eevee-eye-light 99%, transparent 100%),
      radial-gradient(ellipse 4px 7px at 37% 20%, $white 0%, $white 99%, transparent 100%);

    &:after {
      width: 30%;
      height: 30%;
      top: -10px;
      left: 65%;
      transform: rotate(-35deg);
      border-radius: 100%;
      border-right: 3px solid $eevee-eye;
      border-left: 1px solid transparent;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      opacity: 0.4;
    }

    &:last-child {
      right: 0;

      &:after {
        transform: rotate(35deg) rotateY(-180deg);
        left: -10%;
      }
    }
  }

  .closed {
    width: 90%;
    height: 50%;
    top: 15px;
    left: calc(50% - (114px / 2));
    display: none;

    &.is-visible {
      display: block;
    }
  }

  .closed-eye {
    @extend .eye;
    width: 25%;
    background-image: none;
    background-color: transparent;
    border-bottom: 4px solid $eevee-eye;
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  }

  .blink {
    @extend .closed;
    display: none;

    &.is-visible {
      display: block;
    }
  }

  .blink-eye {
    @extend .closed-eye;
    &:after {
      display: none;
    }
  }

  .nose {
    width: 7%;
    height: 7%;
    background-color: lighten($eevee-eye, 15%);
    left: calc(50% - (8.81px / 2));
    top: 73%;
    border-bottom-left-radius: 80% 100%;
    border-bottom-right-radius: 80% 100%;
    border-top-left-radius: 40% 50%;
    border-top-right-radius: 40% 50%;
  }

  .mouth {
    width: 18%;
    height: 10%;
    left: calc(50% - (24.67px / 2));
    top: 85%;
    border-radius: 100%;
    border-top: 2px solid $eevee-eye;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    opacity: 0.5;
    // background-color: $eevee-eye;
    &:before,
    &:after {
      width: 50%;
      height: 50%;
      border-radius: 100%;
      border-top: 1px solid transparent;
      border-right: 1px solid transparent;
      border-left: 1px solid transparent;
      border-bottom: 2px solid $eevee-eye;
      top: -40%;
    }
    &:before {
      left: -50%;
    }
    &:after {
      left: 88%;
    }

    &.is-visible {
      @extend .mouth;
      opacity: 1;
      border-bottom: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      background-color: #740043;
      border-radius: 0;
      border-bottom-left-radius: 200px;
      border-bottom-right-radius: 200px;
      overflow: hidden;

      &:before {
        display: none;
      }
      &:after {
        width: 10px;
        height: 5px;
        background-color: #ff59ba;
        border: none;
        left: 30%;
        top: 40%;
      }
    }
  }

  .chest {
    width: 50%;
    height: 90px;
    left: calc(50% - (175px / 2));
    top: 50%;
    animation: chestBounce 0.5s ease-in-out alternate infinite;

    .fur {
      @include radial-gradient("farthest-corner at 50px 20px", #fcf3e4, #efdbb6, #c5915d);
      &:nth-child(3) {
        width: 50%;
        height: 100%;
        left: calc(50% - (87.5px / 2));
        border-radius: 100%;
        box-shadow: inset 0 0 0 2px rgba(192, 118, 44, 0.4), 3px 0 15px rgba(192, 118, 44, 0.4),
          -3px 0 15px rgba(192, 118, 44, 0.4);

        > .hairs {
          &:before,
          &:after {
            width: 40px;
            height: 40px;
            top: 42px;
          }
          &:before {
            left: 12px;
            transform: rotate(35deg) skewX(25deg);
            border-bottom-left-radius: 60%;
            border-bottom-right-radius: 10%;
            box-shadow: 0 3px $fur-border;
            @include linear-gradient("-37deg", rgb(192, 118, 44), rgb(212, 188, 142) 11%, transparent 20%);
          }
          &:after {
            transform: rotate(-35deg) skewX(-25deg);
            left: 38px;
            border-bottom-right-radius: 60%;
            border-bottom-left-radius: 10%;
            box-shadow: 0 3px $fur-border;
            @include linear-gradient("37deg", rgb(192, 118, 44), rgb(212, 188, 142) 11%, transparent 20%);
          }
        }
      }

      &:nth-child(2) {
        width: 40%;
        height: 80%;
        border-radius: 100%;
        left: 10px;
        top: -10px;
        box-shadow: inset 0 -3px rgba(black, 0.2), inset 0 3px rgba(black, 0.2);
        animation: sideBounce 0.5s ease-in-out alternate infinite;

        > .hairs {
          &:after {
            width: 40px;
            height: 40px;
            transform: rotate(35deg);
            top: 40px;
            left: 10px;
            border-bottom-left-radius: 75%;
            border-top-left-radius: 10%;
            box-shadow: -1px 1px #c5915d;
            @include linear-gradient("-37deg", rgb(192, 118, 44) 1%, rgb(212, 188, 142) 45%, transparent 46%);
            animation: furSway1 0.5s ease-in-out alternate infinite;
          }
        }
      }

      &:nth-child(1) {
        width: 40%;
        height: 80%;
        border-radius: 100%;
        left: 95px;
        top: -10px;
        box-shadow: inset -1px -3px rgba(black, 0.2), inset -1px 3px rgba(black, 0.2);
        animation: sideBounce 0.5s ease-in-out alternate infinite;

        > .hairs {
          &:after {
            width: 40px;
            height: 40px;
            transform: rotate(-35deg);
            top: 40px;
            left: 20px;
            border-bottom-right-radius: 75%;
            border-top-right-radius: 10%;
            box-shadow: 1px 1px #c5915d;
            @include linear-gradient("37deg", rgb(192, 118, 44) 1%, #efdbb6 55%, transparent 56%);
            animation: furSway2 0.5s ease-in-out alternate infinite;
          }
        }
      }
    }
  }

  .legs {
    width: 50%;
    height: 25%;
    left: calc(50% - (175px / 2));
    top: 65%;

    .leg {
      width: 39px;
      height: 38px;
      top: 10%;

      &:first-child {
        left: 40px;
        transform: skewX(2deg);
        @include linear-gradient("to left", rgb(255, 183, 111), rgb(219, 114, 8));
        &:before {
          width: 39px;
          height: 38px;
          top: 30px;
          @include linear-gradient("to left", rgb(255, 183, 111), rgb(219, 114, 8));
        }
      }

      &:last-child {
        left: 100px;
        @include linear-gradient("to right", rgb(255, 183, 111), rgb(219, 114, 8));
        transform: skewX(-2deg);
        &:after {
          width: 39px;
          height: 38px;
          top: 30px;
          @include linear-gradient("to right", rgb(255, 183, 111), rgb(219, 114, 8));
        }
      }
    }

    .paw {
      width: 45px;
      height: 30px;
      top: 150%;
      z-index: 2;
      left: -3px;
      border-bottom-left-radius: 30%;
      border-bottom-right-radius: 30%;
      border-top-right-radius: 50% 50%;
      border-top-left-radius: 50% 50%;
      background: linear-gradient(to bottom, rgb(255, 165, 75) 0%, rgb(245, 155, 65) 40%, transparent 100%),
        linear-gradient(
          to right,
          transparent 0%,
          transparent 25%,
          rgba(black, 0.5) 26%,
          rgba(black, 0.5) 35%,
          transparent 36%,
          transparent 65%,
          rgba(black, 0.5) 66%,
          rgba(black, 0.5) 75%,
          transparent 76%
        ),
        linear-gradient(to bottom, transparent 0%, rgb(219, 114, 8) 55%, rgb(160, 82, 4) 100%);
    }
  }
}

.happy {
  width: 90px;
  height: 90px;
  background-color: pink;
  border: 4px solid black;
  left: 50%;
  top: 10%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 100%;
  transform: rotate(70deg);
  transform-origin: bottom;
  display: none;

  &.after-pet {
    display: block;
    animation: veryHappy 1.2s cubic-bezier(0.36, -0.04, 0.15, 1.64) forwards;
  }

  &:after {
    content: "❤";
    font-size: 3em;
    left: 30%;
    top: 20%;
    color: red;
    z-index: 2;
    transform: rotate(-70deg);
  }
}

.hearts {
  width: 100%;
  height: 20%;
  top: 15%;
  display: none;

  &.is-visible {
    display: block;
  }

  .heart {
    width: 30px;
    height: 30px;
    transform-origin: bottom center;
    transform: scale(0);
    color: red;
    &:after {
      content: "❤";
      font-size: 3em;
    }

    &:nth-child(1) {
      top: 10%;
      left: 45%;
      animation: loveIt 2s ease-in-out infinite;
    }

    &:nth-child(2) {
      top: 20%;
      left: 55%;
      animation: loveIt 2s 0.3s ease-in-out infinite;
    }

    &:nth-child(3) {
      top: 20%;
      left: 35%;
      animation: loveIt 2s 0.6s ease-in-out infinite;
    }
  }
}

.leg,
.fur,
.head,
.ear,
.chest {
  &:hover {
    cursor: grab;
  }
}

@media only screen and (max-width: 500px) {
  .container {
    transform: translate(-50%, -50%) scale(.6);
    left: 50%;
    top: 50%;
  }
}


@media only screen and (max-height: 400px) {
  .container {
    transform: translate(-50%, -50%) scale(.6);
    left: 50%;
    top: 50%;
  }

  .eevee {
    transform: scale(.8);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
}

@keyframes headBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5%);
  }
}

@keyframes earBounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5%) rotateY(10deg);
  }
}

@keyframes chestBounce {
  from {
    top: 50%;
  }
  to {
    top: 52%;
  }
}

@keyframes sideBounce {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(1.05);
  }
}

@keyframes furSway1 {
  from {
    transform: rotate(35deg);
  }
  to {
    transform: rotate(45deg);
  }
}

@keyframes furSway2 {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes veryHappy {
  0% {
    transform: scale(0) rotate(70deg);
  }
  50% {
    transform: scale(1) rotate(70deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loveIt {
  0% {
    transform-origin: bottom center;
    transform: scale(0);
  }
  25% {
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

              
            
!

JS

              
                const openEyes = document.querySelector('.eyes')
const blinkedEyes = document.querySelector('.blink')
const closedEyes = document.querySelector('.closed')
const happyBubble = document.querySelector('.happy')
const hearts = document.querySelector('.hearts')
const mouth = document.querySelector('.mouth')

// Event classes
const head = document.querySelector('.head')
const legs = document.querySelectorAll('.leg')
const chest = document.querySelector('.chest')
const ears = document.querySelectorAll('.ear')

if (isMobile()) {
  document.querySelector('.mobile-block').style.display = 'flex'
  document.querySelector('.container').style.display = 'none'
}

head.addEventListener('mousedown', enableAnimations)
chest.addEventListener('mousedown', enableAnimations)

legs.forEach(leg => {
  leg.addEventListener('mousedown', enableAnimations)
})

ears.forEach(ear => {
  ear.addEventListener('mousedown', enableAnimations)
})

// https://stackoverflow.com/questions/17436760/detect-mouseup-outside-of-mousedown-element
document.addEventListener('mouseup', disableAnimations)

// Original implementation included the use of .toggle.
// Because we know when we want animations to be enabled or disabled, this approach is guaranteed to reveal and conceal specific elements. 
function enableAnimations () {
  openEyes.classList.remove('is-visible')
  blinkedEyes.classList.remove('is-visible')
  closedEyes.classList.add('is-visible')
  hearts.classList.add('is-visible')
  mouth.classList.add('is-visible')
  happyBubble.classList.remove('after-pet')
}

function disableAnimations () {
  openEyes.classList.add('is-visible')
  blinkedEyes.classList.add('is-visible')
  closedEyes.classList.remove('is-visible')
  hearts.classList.remove('is-visible')
  mouth.classList.remove('is-visible')
  happyBubble.classList.add('after-pet')
}

function isMobile() {
  return typeof window.orientation !== 'undefined'
}
              
            
!
999px

Console