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);
}
}
Top comments (0)