card trick

dabblet.css

/* card trick */
button { width:2em; height:3em; border:1px solid #ccc; font-size:1rem;
	animation:6s grow cubic-bezier(.55,0,.55,1) alternate infinite }
	
@keyframes grow {
	0% { background:hsla(0,100%, 50%,.8) }
	33% { background:hsla(90,100%,50%,.8) }
	66% { background:hsla(180,100%,52%,.8) }
	100% { background:hsla(270,100%,50%,.8);
		filter:blur(2px);
		transform:rotate3d(0,0,1,360deg) translate3d(16rem,0,.3rem);  } }

body { display:flex; align-items:center; justify-content:center; 
	perspective:21rem; transform-style:preserve-3d; perspective-origin:top;
	-animation:36s rotate cubic-bezier(.55,0,.55,1) alternate infinite }
html, body{ height:100%; padding:0; margin:0 }

@keyframes rotate {
	to { transform:rotate3d(0,1,0,173.5deg) }
}

dabblet.html

<button></button>

dabblet.js

var P = .5+Math.sqrt(5)/2,
	now = 
	last = +new Date,
	frame = 32,
	cards = 52;
	
function grow(){
/**/console.info(requestAnimationFrame(function(){/**/
    var step = (now = +new Date) - last;
    last = now;
    
    console.info('+'+step, cards + ' cards');
    if (cards < 0) return;
    if (step > frame*P) return setTimeout(grow, step/P);
    if (step < frame/P) return setTimeout(grow, step*P);
    
    console.debug(step, setTimeout(grow, step));
    if (cards-- > 0) {
    	var el = document.createElement('button');
    	el.innerHTML = ['&#9824;','&#9829;','&#9830;','&#9827;'][now % 4];
		document.body.appendChild(el);
	}
/**/}));/**/
}

document.body.addEventListener('click', grow);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}