DEV Community

loading...
Cover image for Make a coin-up game animation in pure CSS and Javascript

Make a coin-up game animation in pure CSS and Javascript

chr15m profile image Chris McCormick ・2 min read

In this screencast you'll learn how to make a coin-up game animation in pure CSS and Javascript. You'll also learn about my process for quickly making these game-like CSS animations in HTML5 and Javascript using the Slingcode online editor.

👇 See below for the full HTML & CSS sourccce code!

I've been having a lot of fun working on these juicy game-like animations for HTML5 games lately. These types of animations are a good way to bring heaps of bling to your web games.

I'll be releasing a full set of animations you can use in your own HTML5 games pretty soon, so stay tuned for that.

Source code

<!doctype html>
<html lang="en-us">
  <head>
    <title>Pure CSS coin-up animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="description" content="Blank HTML file for you to create something.">
    <link rel="stylesheet" href="animation.css">
    <script src="https://sfxr.me/riffwave.js"></script>
    <script src="https://sfxr.me/sfxr.js"></script>
    <style>
      * {
        user-select: none;
      }

      body {
        max-width: 800px; width: 100%; margin: 1em auto; font-size: 2em;
        font-family: arial;
        text-align: center;
      }

      #coinup {
        width: 200px;
        height: 100px;
        background-color: #178A94;
        margin: auto;
        margin-top: 300px;
      }

      #coin {
        width: 64px;
        animation: bounce 2s forwards;
        transform-origin: center bottom;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>Coin up animation</h3>
      <div id="coinup" onclick="addcoin();"></div>
    </div>
  </body>
  <script>
  const s = new SoundEffect("34T6PkrBW3jQjhYnpdxv8qMiiuXscEMoYasigAhYRms6DWnYCKZ6dDYujNHfBWDv6o1fL1SfJbCreRwiyG1i4iKbpBKxZiMLPzbW9vMBhRaew3nBCVS1eaGF1").generate();
  function addcoin() {
    s.getAudio().play();
    const c = document.createElement("img");
    c.id = "coin";
    c.src = "coin.png";
    c.onanimationend = function() {
      document.getElementById("coinup").removeChild(c);
    }
    document.getElementById("coinup").appendChild(c);
  }
  </script>
</html>
@keyframes bounce {
  from,
  33%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  20%,
  23% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -200px, 0) scaleY(1.1);
  }

  50% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -100px, 0) scaleY(1.05);
  }

  60% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -50px, 0) scaleY(1.02);
  }

  80% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, 0, 0);
  }
}

Discussion

pic
Editor guide