card swap

dabblet.css

/**
 * card swap
 */

.a
{
	border : #6f6 solid;

	animation : a 10s infinite;
	z-index : 1;
}

.b
{
	border : #f66 solid;

	animation : b 10s infinite;
	z-index : 2;
}

.a,
.b
{
	position : absolute;
	top : 0;
	background-color : white;

	font : 4em/2em sans;
	text-align : center;
	width  : 2em;
	height : 2em;
}

@keyframes a
{
    25% {
    	transform : translateY(0);
    	z-index : 2;
    }
    32.5% {
    	transform : translateY(-1.25em);
    	z-index : 1;
    }

    50% {
    	transform : translateY(0);
    	z-index : 1;
    }
    
    75% {
    	transform : translateY(-1.25em);
    	z-index : 2;
    }
    100% {
    	transform : translateY(0);
    	z-index : 2;
    }
}

@keyframes b
{
    25% {
    	transform : translateY(0);
    	z-index : 1;
    }
    32.5% {
    	transform : translateY(1.25em);
    	z-index : 2;
    }

    50% {
    	transform : translateY(0);
    	z-index : 2;
    }
    
    75% {
    	transform : translateY(1.25em);
    	z-index : 1;
    }
    100% {
    	transform : translateY(0);
    	z-index : 1;
    }
}

dabblet.html

<div class="a">A</div>
<div class="b">B</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}