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

              
                <main id=app>
  
  <h1>Pokéball Sprite Animations</h1>

  <div class="pokemon">
    
    <!-- the 'pkmn' element requires a few divs to
      be able to render the whole set of animations -->
    
    <div class="pkmn exit left">
      <div class="poke ball">
        <span class="x">
          <span class="y">
            <span class="sprite">
            </span>
          </span>
        </span>
      </div>
      <div class="mon"></div>
      <div class="explode"></div>
    </div>
    <div class="pkmn exit right">
      <div class="premier ball">
        <span class="x">
          <span class="y">
            <span class="sprite">
            </span>
          </span>
        </span>
      </div>
      <div class="mon"></div>
      <div class="explode"></div>
    </div>
    
  </div>
  
  <p>A collection of pokéball css animations; 
    using both sprite cycling and transforms.</p>
  
  <section class="balls">
    
    <!-- the 'ball' element can perform all the animations
      using a single div with psuedo-elements. -->
    
    <div class="poke ball"></div>
    <div class="poke ball side"></div>
    <div class="poke ball open"></div>
    <div class="poke ball roll"></div>
    <div class="poke ball rock"></div>
    <div class="poke ball bounce"></div>
    
  </section>
  
  <section class="balls">
    
    <div class="great ball"></div>
    <div class="great ball side"></div>
    <div class="great ball open"></div>
    <div class="great ball roll"></div>
    <div class="great ball rock"></div>
    <div class="great ball bounce"></div>
    <div class="ultra ball"></div>
    <div class="ultra ball side"></div>
    <div class="ultra ball open"></div>
    <div class="ultra ball roll"></div>
    <div class="ultra ball rock"></div>
    <div class="ultra ball bounce"></div>
    <div class="master ball"></div>
    <div class="master ball side"></div>
    <div class="master ball open"></div>
    <div class="master ball roll"></div>
    <div class="master ball rock"></div>
    <div class="master ball bounce"></div>
    
    <div class="safari ball"></div>
    <div class="safari ball side"></div>
    <div class="safari ball open"></div>
    <div class="safari ball roll"></div>
    <div class="safari ball rock"></div>
    <div class="safari ball bounce"></div>
    <div class="premier ball"></div>
    <div class="premier ball side"></div>
    <div class="premier ball open"></div>
    <div class="premier ball roll"></div>
    <div class="premier ball rock"></div>
    <div class="premier ball bounce"></div>
    <div class="sport ball"></div>
    <div class="sport ball side"></div>
    <div class="sport ball open"></div>
    <div class="sport ball roll"></div>
    <div class="sport ball rock"></div>
    <div class="sport ball bounce"></div>
  
    <div class="net ball"></div>
    <div class="net ball side"></div>
    <div class="net ball open"></div>
    <div class="net ball roll"></div>
    <div class="net ball rock"></div>
    <div class="net ball bounce"></div>
    <div class="dive ball"></div>
    <div class="dive ball side"></div>
    <div class="dive ball open"></div>
    <div class="dive ball roll"></div>
    <div class="dive ball rock"></div>
    <div class="dive ball bounce"></div>
    <div class="nest ball"></div>
    <div class="nest ball side"></div>
    <div class="nest ball open"></div>
    <div class="nest ball roll"></div>
    <div class="nest ball rock"></div>
    <div class="nest ball bounce"></div>
    <div class="repeat ball"></div>
    <div class="repeat ball side"></div>
    <div class="repeat ball open"></div>
    <div class="repeat ball roll"></div>
    <div class="repeat ball rock"></div>
    <div class="repeat ball bounce"></div>
    <div class="timer ball"></div>
    <div class="timer ball side"></div>
    <div class="timer ball open"></div>
    <div class="timer ball roll"></div>
    <div class="timer ball rock"></div>
    <div class="timer ball bounce"></div>
    <div class="luxury ball"></div>
    <div class="luxury ball side"></div>
    <div class="luxury ball open"></div>
    <div class="luxury ball roll"></div>
    <div class="luxury ball rock"></div>
    <div class="luxury ball bounce"></div>
    <div class="dusk ball"></div>
    <div class="dusk ball side"></div>
    <div class="dusk ball open"></div>
    <div class="dusk ball roll"></div>
    <div class="dusk ball rock"></div>
    <div class="dusk ball bounce"></div>
    <div class="heal ball"></div>
    <div class="heal ball side"></div>
    <div class="heal ball open"></div>
    <div class="heal ball roll"></div>
    <div class="heal ball rock"></div>
    <div class="heal ball bounce"></div>
    <div class="quick ball"></div>
    <div class="quick ball side"></div>
    <div class="quick ball open"></div>
    <div class="quick ball roll"></div>
    <div class="quick ball rock"></div>
    <div class="quick ball bounce"></div>
    <div class="cherish ball"></div>
    <div class="cherish ball side"></div>
    <div class="cherish ball open"></div>
    <div class="cherish ball roll"></div>
    <div class="cherish ball rock"></div>
    <div class="cherish ball bounce"></div>
    <div class="fast ball"></div>
    <div class="fast ball side"></div>
    <div class="fast ball open"></div>
    <div class="fast ball roll"></div>
    <div class="fast ball rock"></div>
    <div class="fast ball bounce"></div>
    <div class="level ball"></div>
    <div class="level ball side"></div>
    <div class="level ball open"></div>
    <div class="level ball roll"></div>
    <div class="level ball rock"></div>
    <div class="level ball bounce"></div>
    <div class="lure ball"></div>
    <div class="lure ball side"></div>
    <div class="lure ball open"></div>
    <div class="lure ball roll"></div>
    <div class="lure ball rock"></div>
    <div class="lure ball bounce"></div>
    <div class="heavy ball"></div>
    <div class="heavy ball side"></div>
    <div class="heavy ball open"></div>
    <div class="heavy ball roll"></div>
    <div class="heavy ball rock"></div>
    <div class="heavy ball bounce"></div>
    <div class="love ball"></div>
    <div class="love ball side"></div>
    <div class="love ball open"></div>
    <div class="love ball roll"></div>
    <div class="love ball rock"></div>
    <div class="love ball bounce"></div>
    <div class="friend ball"></div>
    <div class="friend ball side"></div>
    <div class="friend ball open"></div>
    <div class="friend ball roll"></div>
    <div class="friend ball rock"></div>
    <div class="friend ball bounce"></div>
    <div class="moon ball"></div>
    <div class="moon ball side"></div>
    <div class="moon ball open"></div>
    <div class="moon ball roll"></div>
    <div class="moon ball rock"></div>
    <div class="moon ball bounce"></div>
    <div class="park ball"></div>
    <div class="park ball side"></div>
    <div class="park ball open"></div>
    <div class="park ball roll"></div>
    <div class="park ball rock"></div>
    <div class="park ball bounce"></div>
    <div class="dream ball"></div>
    <div class="dream ball side"></div>
    <div class="dream ball open"></div>
    <div class="dream ball roll"></div>
    <div class="dream ball rock"></div>
    <div class="dream ball bounce"></div>
    <div class="beast ball"></div>
    <div class="beast ball side"></div>
    <div class="beast ball open"></div>
    <div class="beast ball roll"></div>
    <div class="beast ball rock"></div>
    <div class="beast ball bounce"></div>
  </section>

  <p>Credit to <a href="https://www.pokecommunity.com/showpost.php?p=9938453&postcount=4">WolfPP from the PokéCommunity forums</a> for the excellent Pokéball sprite work! <br>
    Pokémon Sprites from <a href="http://pokemondb.net">pokemondb.net</a>, and pokémon exit flourish borrowed from <a href="https://www.artstation.com/artwork/809NQ">Jimena on Artstation.</a>
  </p>
  
</main>



  
  <label><input type="checkbox"> slow motion?</label>
              
            
!

CSS

              
                
/* 
  The css for the pokeball sprites is quite long, but fairly simple.
  And the bouncing animation is cute, but again pretty straight-forward with
  some well-timed squash/stretch.

  But I am quite excited and proud of the throw/exit animations on the pokemon
  sprites. There's a few really cool techniques I dreamt up like using a color-dodge
  blend on the sprite over the top of a heavily blurred, hue-rotated and brightened
  animation of the pokemon sprite.

*/







/* pokeballs code */

$cell: 41px;
$celly: 40px;

.ball {
  margin: 1px;
  position: relative;
  bottom: -9px;
}
.ball.flip {
  transform: scaleX(-1);
}

$offset-poke: $cell*0;
$offset-great: $cell*1;
$offset-safari: $cell*2;
$offset-ultra: $cell*3;
$offset-master: $cell*4;
$offset-net: $cell*5;
$offset-dive: $cell*6;
$offset-nest: $cell*7;
$offset-repeat: $cell*8;
$offset-timer: $cell*9;
$offset-luxury: $cell*10;
$offset-premier: $cell*11;
$offset-dusk: $cell*12;
$offset-heal: $cell*13;
$offset-quick: $cell*14;
$offset-cherish: $cell*15;
$offset-fast: $cell*16;
$offset-level: $cell*17;
$offset-lure: $cell*18;
$offset-heavy: $cell*19;
$offset-love: $cell*20;
$offset-friend: $cell*21;
$offset-moon: $cell*22;
$offset-sport: $cell*23;
$offset-park: $cell*24;
$offset-dream: $cell*25;
$offset-beast: $cell*26;

.ball,
.ball .sprite {
  width: $cell;
  height: $cell;
  background-image: url(https://assets.codepen.io/13471/pokeballs.png);
  background-position: 0 0;
  transform-origin: center bottom;
  &:before {
    content: "";
    position: absolute;
    left: 30%;
    bottom: 8px;
    width: 40%;
    height: 3px;
    border-radius: 100%;
    background: black;
    box-shadow: 0 1px 2px black;
    opacity: 0.3;
  }
}
.poke.ball { &, .sprite { background-position-x: -$offset-poke; } }
.great.ball { &, .sprite { background-position-x: -$offset-great; } }
.safari.ball { &, .sprite { background-position-x: -$offset-safari; } }
.ultra.ball { &, .sprite { background-position-x: -$offset-ultra; } }
.master.ball { &, .sprite { background-position-x: -$offset-master; } }
.net.ball { &, .sprite { background-position-x: -$offset-net; } }
.dive.ball { &, .sprite { background-position-x: -$offset-dive; } }
.nest.ball { &, .sprite { background-position-x: -$offset-nest; } }
.repeat.ball { &, .sprite { background-position-x: -$offset-repeat; } }
.timer.ball { &, .sprite { background-position-x: -$offset-timer; } }
.luxury.ball { &, .sprite { background-position-x: -$offset-luxury; } }
.premier.ball { &, .sprite { background-position-x: -$offset-premier; } }
.dusk.ball { &, .sprite { background-position-x: -$offset-dusk; } }
.heal.ball { &, .sprite { background-position-x: -$offset-heal; } }
.quick.ball { &, .sprite { background-position-x: -$offset-quick; } }
.cherish.ball { &, .sprite { background-position-x: -$offset-cherish; } }
.fast.ball { &, .sprite { background-position-x: -$offset-fast; } }
.level.ball { &, .sprite { background-position-x: -$offset-level; } }
.lure.ball { &, .sprite { background-position-x: -$offset-lure; } }
.heavy.ball { &, .sprite { background-position-x: -$offset-heavy; } }
.love.ball { &, .sprite { background-position-x: -$offset-love; } }
.friend.ball { &, .sprite { background-position-x: -$offset-friend; } }
.moon.ball { &, .sprite { background-position-x: -$offset-moon; } }
.sport.ball { &, .sprite { background-position-x: -$offset-sport; } }
.park.ball { &, .sprite { background-position-x: -$offset-park; } }
.dream.ball { &, .sprite { background-position-x: -$offset-dream; } }
.beast.ball { &, .sprite { background-position-x: -$offset-beast; } }

.ball.open {
  background-position-y: -($celly*10) - 1.5;
}
.ball.side {
  background-position-y: -($celly*9) - 1.5;
}
.ball.roll {
  animation: ball-roll 1s steps(1) infinite;
}
.ball.rock {
  animation: ball-rock 1.22s steps(1) infinite;
}
.ball.bounce {
  animation-name: bounce;
  &:before {
    animation-name: bounce-shadow;
  }
  &, &:before {
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@keyframes ball-roll {
  0% { background-position-y: 0; }
  12.5% { background-position-y: -$celly*1; }
  25% { background-position-y: -$celly*2; }
  37.5% { background-position-y: -$celly*3; }
  50% { background-position-y: -$celly*4; }
  62.5% { background-position-y: -$celly*5; }
  75% { background-position-y: -$celly*6; }
  87.5% { background-position-y: -$celly*7; }
  100% { background-position-y: -$celly*8; }
}

@keyframes ball-rock {
  0% { background-position-y: 0; }
  8.33% { background-position-y: -$celly*11; }
  16.66% { background-position-y: -$celly*12; }
  25% { background-position-y: -$celly*13; }
  33.33% { background-position-y: -$celly*12; }
  41.66% { background-position-y: -$celly*11; }
  50% { background-position-y: -$celly*0; }
  58.33% { background-position-y: -$celly*14; }
  66.66% { background-position-y: -$celly*15; }
  75% { background-position-y: -$celly*16; }
  83.33% { background-position-y: -$celly*15; }
  91.66% { background-position-y: -$celly*14; }
  100% { background-position-y: -$celly*0; }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scaleY(.75) scaleX(1.15);
    animation-timing-function: ease-in;
  }
  10% {
    transform: translateY(-10%) scaleY(1) scaleX(1);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-80%) scaleY(1.1) scaleX(.95);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(-10%) scaleY(1) scaleX(1);
    animation-timing-function: ease-out;
  }
}

@keyframes bounce-shadow {
  0%, 100% {
    opacity: .4;
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  10%, 90% {
    opacity: 0;
    transform: translateY(200%) scaleY(.3) scaleX(.3);
  }
}



















/* pokemon throw/exit animation code */

:root {
  --poke1: url("https://img.pokemondb.net/sprites/black-white/anim/normal/eevee.gif");
  --poke2: url("https://img.pokemondb.net/sprites/black-white/anim/normal/pikachu.gif");
}

.pkmn {
  width: 160px;
  height: 140px;
  margin: 2px;
  position: relative;
}


.pkmn .mon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.pkmn .mon:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform-origin: center 125px;
  background-image: var(--poke1);
}

.pkmn:nth-child(2) .mon:before {
  background-image: var(--poke2);
}

.pkmn .ball {
  position: absolute;
  left: 10%;
  bottom: -3px;
  top: auto;
  z-index: 1;
}

.pkmn .explode {
  will-change: opacity;
  overflow: hidden;
  z-index: 3;
}


.pkmn.exit .mon:before {
  animation-delay: 1.5s;
  animation-duration: .75s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-direction: forwards;
}
.pkmn.exit .mon:before {
  animation-name: mon-poof;
}
.pkmn.exit:nth-child(2) .mon:before {
  animation-name: mon-poof-2;
}

.pkmn.left .mon { transform: scaleX(-1); }
.pkmn.right .mon { transform: scaleX(1); }
.pkmn.right .ball { transform: scaleX(-1); left: 63%; }








@keyframes mon-poof {
  0% {
    opacity: 0;
    transform: scale(3);
    filter: blur(9px) contrast(0.25) brightness(.65) sepia(1) saturate(3) hue-rotate(-90deg) contrast(2.2) brightness(5) blur(9px);
  }
  30% {
    opacity: 1;
  }
  75% {
    transform: scale(1);
    filter: blur(2px) contrast(0.25) brightness(.65) sepia(1) saturate(4) hue-rotate(-90deg) contrast(2) brightness(4) blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px) contrast(1) brightness(1) sepia(0) saturate(1) hue-rotate(0deg) contrast(1) brightness(1) blur(0px);
  }
}

@keyframes mon-poof-2 {
    0% {
      opacity: 0;
      transform: scale(3);
      filter: blur(9px) contrast(0.3) brightness(0.7) sepia(1) saturate(4)
        hue-rotate(140deg) contrast(2.2) brightness(6) blur(9px);
    }
    30% {
      opacity: 1;
    }
    75% {
      transform: scale(1);
      filter: blur(2px) contrast(0.1) brightness(0.66) sepia(1) saturate(1)
        hue-rotate(140deg) contrast(2.2) brightness(6) blur(2px);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0px) contrast(1) brightness(1) sepia(0) saturate(1)
        hue-rotate(0deg) contrast(1) brightness(1) blur(0px);
    }
  }









/* ball throwing / bouncing / opening code */

.ball.throw,
.pkmn.exit .ball {
  animation-duration: 5s; 
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-name: throw;
  background: none;
}
.ball.throw:before,
.pkmn.exit .ball:before {
  display: none;
}

.ball.throw *,
.pkmn.exit .ball *,
.ball.throw .sprite:before,
.pkmn.exit .ball .sprite:before {
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.ball.throw *,
.pkmn.exit .ball * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ball.throw .x,
.pkmn.exit .ball .x {
  animation-name: throw-x;
}

.ball.throw .y,
.pkmn.exit .ball .y {
  animation-name: throw-y;
}

.ball.throw .sprite,
.pkmn.exit .ball .sprite {
  animation-duration: 2.5s;
  animation-name: throw-sprite;
  animation-timing-function: steps(1);
}
.ball.throw .sprite:before,
.pkmn.exit .ball .sprite:before {
  animation-name: throw-shadow;
}

@keyframes throw {
  0%,
  100% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  20%,
  90% {
    opacity: 1;
  }
}

@keyframes throw-x {
  0% {
    transform: translateX(-240%);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes throw-y {
  0% {
    transform: translateY(-140%) scaleY(1.05) scaleX(0.95);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-6%) scaleY(0.95) scaleX(1.1);
    animation-timing-function: ease-out;
  }
  75% {
    transform: translateY(-50%) scaleY(1.05) scaleX(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

@keyframes throw-sprite {
  0% {
    background-position-y: -40px;
  }
  3% {
    background-position-y: -80px;
  }
  6% {
    background-position-y: -120px;
  }
  9% {
    background-position-y: -160px;
  }
  12% {
    background-position-y: -200px;
  }
  18% {
    background-position-y: -240px;
  }
  23% {
    background-position-y: -320px;
  }
  28% {
    background-position-y: -360px;
  }
  35%,
  90% {
    background-position-y: -400px;
  }
  95% {
    background-position-y: -320px;
  }
  100% {
    background-position-y: -360px;
  }
}

@keyframes throw-shadow {
  0% {
    opacity: 0;
    transform: translateY(1px) scaleY(1) scaleX(1);
    animation-timing-function: ease;
  }
  35%,
  65%,
  95% {
    opacity: 0;
    transform: translateY(200%) scaleY(0.3) scaleX(0.3);
  }
  52% {
    opacity: 0.3;
    transform: translateY(1px) scaleY(1) scaleX(1);
  }
  100% {
    opacity: 0.3;
    transform: translateY(1px) scaleY(1) scaleX(1);
  }
}








/* pokemon exiting animation code */

$ecell: 240px;

.explode {
  width: $ecell;
  height: $ecell;
  position: absolute;
  left: 50%;
  top: 87%;
  transform: translate(-50%,-50%);
  mix-blend-mode: color-dodge;
  will-change: opacity, filter;
  opacity: 0;
}

.explode:before {
  content: "";
  background-image: url("https://assets.codepen.io/13471/jimena-cuenca-changeworld-sprite.jpg");
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
}

.exit .explode,
.exit .explode:before {
  animation-delay: 1.2s;
  animation-duration: .66s;
  animation-iteration-count: 1;
}

.pkmn.exit .explode {
  animation-name: explode-filters;
  animation-timing-function: linear;
  opacity: 0;
}
.pkmn.exit:nth-child(2) .explode {
  animation-name: explode-filters-2;
}

.exit .explode:before {
  animation-name: explode;
  animation-timing-function: steps(1);
}

.pkmn.exit .mon:before {
  animation-delay: 1.33s;
  animation-duration: var(--slowmo,1s);
}
.pkmn.exit .explode,
.pkmn.exit .explode:before {
  animation-delay: 1s;
  animation-duration: var(--slowsplode,.75s);
}
.pkmn.exit .ball, 
.pkmn.exit .ball *, 
.pkmn.exit .ball .sprite:before {
  animation-delay: 0s;
}

@keyframes explode {
  0%   { background-position: 0 0; }
  5%   { background-position: -$ecell 0; }
  10%   { background-position: -($ecell*2) 0; }
  15%   { background-position: -($ecell*3) 0; }
  20%   { background-position: -($ecell*4) 0; }
  25%   { background-position: -($ecell*5) 0; }
  30%   { background-position: -($ecell*6) 0; }
  35%   { background-position: -($ecell*7) 0; }
  40%   { background-position: -$ecell (-$ecell); }
  45%   { background-position: -($ecell*2) (-$ecell); }
  50%   { background-position: -($ecell*3) (-$ecell); }
  55%   { background-position: -($ecell*4) (-$ecell); }
  60%   { background-position: -($ecell*5) (-$ecell); }
  65%   { background-position: -($ecell*6) (-$ecell); }
  70%   { background-position: -$ecell (-$ecell*2); }
  75%   { background-position: -($ecell*1) (-$ecell*2); }
  80%   { background-position: -($ecell*2) (-$ecell*2); }
  85%   { background-position: -($ecell*3) (-$ecell*2); }
  90%   { background-position: -($ecell*4) (-$ecell*2); }
  95%   { background-position: -($ecell*5) (-$ecell*2); }
  100%   { background-position: -($ecell*6) (-$ecell*2); }
}


  @keyframes explode-filters {
    0% {
      filter: blur(0px) brightness(1) contrast(1) sepia(0.75) saturate(1)
        hue-rotate(270deg);
      opacity: 1;
    }
    40% {
      filter: blur(0px) brightness(1) contrast(1) sepia(0.75) saturate(1)
        hue-rotate(270deg);
    }
    50% {
      opacity: 1;
      filter: blur(2px) brightness(1) contrast(1) sepia(1) saturate(2)
        hue-rotate(270deg);
    }
    75% {
      opacity: 1;
    }
    100% {
      filter: blur(12px) brightness(0.5) contrast(1) sepia(1) saturate(0)
        hue-rotate(270deg);
      opacity: 0;
    }
  }

  @keyframes explode-filters-2 {
    0% {
      filter: blur(0px) brightness(1) contrast(1) sepia(0.75) saturate(1)
        hue-rotate(190deg);
      opacity: 1;
    }
    40% {
      filter: blur(0px) brightness(1) contrast(1) sepia(0.75) saturate(1)
        hue-rotate(190deg);
    }
    50% {
      opacity: 1;
      filter: blur(2px) brightness(1) contrast(1) sepia(1) saturate(2)
        hue-rotate(190deg);
    }
    75% {
      opacity: 1;
    }
    100% {
      filter: blur(12px) brightness(0.5) contrast(1) sepia(1) saturate(0)
        hue-rotate(190deg);
      opacity: 0;
    }
  }
































/* ui code, unrelated */

#app {
  padding: 20px;
}

.pokemon {
  display: flex;
  margin-bottom: 60px;
  margin-top: -40px;
  justify-content: center;
}

.pkmn {
  cursor: pointer;
}

.balls {
  display: grid;
  grid-template-columns: repeat(18,1fr);
  max-width: 800px;
  margin: auto;
  margin-top: 30px;
  justify-items: center;
}

.balls:nth-of-type(1) .ball:nth-of-type(1) {
  grid-column: 7;
}

.balls:nth-of-type(2) .ball:nth-last-child(6) {
  grid-column: 13;
}

body,html {
  color: white;
  background: #333844;
  margin: 0;
  padding: 0;
  font-family: "pkmn", monospace;
  text-align: center;
  font-size: 14px;
  text-shadow: 0 0.15em 0 #000a;
}

* {
  box-sizing: border-box;
}

a {
  color: #00c0ff;
}

label {
  font-size: 12px;
  position: fixed;
  top: 15px;
  left: 15px;
}

p:last-child {
  margin-top: 50px;
  line-height: 1.4;
}

@font-face {
  font-family: "pkmn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://assets.codepen.io/13471/Pokemon-DPPt.woff2") format("woff2"), url("https://assets.codepen.io/13471/pokemon-DPPt.woff") format("woff");
}
              
            
!

JS

              
                
// Javascript is only for cycling the pokemon animations
// and changing the sprites randomly. Not necessary.






















const src = "https://img.pokemondb.net/sprites/black-white/anim/normal/";

const iChooseYou = () => {
  const pkmn = $(".pkmn");
  pkmn.removeClass("exit");
  setTimeout(() => {
    const poke1 = pokes[Math.floor(Math.random()*pokes.length)];
    const poke2 = pokes[Math.floor(Math.random()*pokes.length)];
    $("#app").attr(`style`,`
      --poke1:url(${src}${poke1}.gif);
      --poke2:url(${src}${poke2}.gif);
    `);
    pkmn.addClass("exit");
  },100);
  clearTimeout(timer);
  timer = setTimeout(iChooseYou,9000);
}

$("body").on("click", iChooseYou);
let timer = setTimeout(iChooseYou,6000);



$("input").on("change", (e) => {
  console.log(this);
  if ( $(e.currentTarget).is(":checked") ) {
    $("body").attr(`style`,`--slowmo: 5s; --slowsplode: 2s`);
  } else {
    $("body").attr("style","");
  }
})














const pokes = [
  "bulbasaur",
  "squirtle",
  "charmander",
  "chikorita",
  "totodile",
  "cyndaquil",
  "pikachu",
  "eevee",
  "jigglypuff",
  "psyduck",
  "togepi",
  "meowth"
];




              
            
!
999px

Console