Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by Jonathan Sampson.

Flap, Flap, Flap.

Oh man, I'm so going to become filthy rich now. Just tap, tap, and fly through the pipe openings. Written entirely in CSS, because previous implementations using physics engines left people irritated and annoyed...

A Pen by Jonathan Sampson on CodePen.


<div class="canvas">
<div class="bird-box">
<div class="sprite bird"></div>
<div class="pipe"></div>
<div class="pipe"></div>
<div class="pipe"></div>
<div class="pipe"></div>
<div class="ground"></div>
// Send cheques to @jonathansampson
html {
background: #333;
overflow-x: hidden;
.sprite {
background-image: url('');
.canvas {
height: 256px;
position: relative;
background: url('');
animation: scroll 10s linear infinite;
box-shadow: 0 0 10em #000;
.bird-box {
width: 17px;
height: 12px;
position: absolute;
left: 10%; top: 60%;
transition: top 1.5s;
.canvas:active .bird-box {
top: 10%;
transform: rotate(-15deg);
.bird {
height: 100%;
background-position: -264px -64px;
transform: translateY(-50%);
flap 1s steps(2) infinite,
hover .5s ease-in-out infinite alternate;
.ground {
position: absolute;
bottom: 0; left: 0;
height: 56px; width: 100%;
background: url("");
animation: scroll 5s linear infinite;
.pipe {
width: 26px;
height: 256px;
position: absolute;
top: 0; left: 100%;
animation: passby 30s linear infinite;
background: url("");
background-position-y: -75px;
.pipe:nth-of-type(2) {
animation-delay: 1.5s;
background-position-y: 0;
.pipe:nth-of-type(3) {
animation-delay: 3s;
background-position-y: -115px;
.pipe:nth-of-type(4) {
animation-delay: 4.5s;
background-position-y: -30px;
@keyframes flap {
to { background-position-y: -116px }
@keyframes hover {
to { transform: translateY(50%) }
@keyframes scroll {
to { background-position-x: -144px }
@keyframes passby {
to { left: -10%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.