Chris Contolini

Spoofing Proof-of-Payment Systems with CSS Animations

Spoofing Proof-of-Payment Systems with CSS Animations

While riding a Portland bus not too long ago I was fascinated by their electronic ticketing system. You buy a ticket via their mobile app and present your phone to the driver when boarding a bus. A digital ticket consists of a series of sliding images behind a transparent image of a bus. Bus drivers glance at it and if the timestamp at the top is correct and it kinda-sorta-looks-like-a-ticket they wave you on.

All the animations in the ticket can be emulated using standard web technologies, namely CSS3 animations. Let’s explore how by creating a digital ticket for our fake transit company, ButtMet!

The finished product is available at ButtMet.com. By adding the website to your mobile phone’s home screen, your phone will load it without the URL bar, causing it to look like a real app.

Step 1: Draw some images that you want to scroll across the ticket

Birds
Trees

Step 2: Draw a bus and put your logo on it

Bus

Step 3: Add animations

Apply the translate3d() CSS function in an infinite loop to the elements you want to animate. The gist of which is (in Sass):

@mixin animate($bottom, $speed) {
    transform: translate3d(0, 0, 0);
    position: absolute;
    bottom: $bottom;
    animation: infiniteLoop $speed infinite linear;
}

@keyframes infiniteLoop {
    0% {
        transform: translateX(100%)
    }
    100% {
        transform: translateX(-100%)
    }
}

Step 4: Display an expiration date

Write some JavaScript that displays an expiration date one hour into the future. The code below uses Moment.js.

var expiration = moment().add(getRandomInt(68, 82), 'minutes').format('h:mmA MMM D YYYY');
document.querySelector('#time').innerHTML = expiration;

Step 5: Glue it all together in a mobile-friendly website

And voila! An instant bus ticket. Check out buttmet.com for the finished demo. Check out the source code to see the complete CSS.

Buttmet.com

TriMet photo by Mobilus In Mobili. Used with permission.