crazyrohila/dabblet.css

## dabblet.css
/**
 * Bat-ball
 */

@keyframes ball {
    0% {
        left: -20%;
        transform: rotate(0deg);
    }
    30% {
        top: -10px;
    }
    80% {
        left: 74%;
        top: 250px;
        transform: rotate(2020deg);
    }
    100% {
        left: 10%;
        top: -50%;
        transform: scale(.1);
    }
}

#throw:checked ~ div {
    animation-play-state: running;
    transform: rotate(10deg);
    transition: 0.8s 3.77s transform;
}
#throw:not(:checked) ~div {
    animation-name: none;
    transform: rotate(0deg);
    transition: 0s 0s transform;
}
input.cbox {display:none;}
.label {
    cursor:pointer;
    position: absolute;
    color: #008080;
    font-size: 200%;
    padding: 5px 10px;
    border: 2px solid #008080;
    border-radius: 10px;
    box-shadow: 2px 2px 10px gray;
}
.label:hover {
    color: white;
    background: #008080;
}

#ball {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-image: linear-gradient(left, red, green);
    position: absolute;
    top: 250px;
    left: -20%;
    animation-name: ball;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-play-state:paused;
    }

#bat {
    width: 10px;
    height: 300px;
    background: black;
    position: absolute;
    right: 10%;
    top: 100px;
    }

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<label for="throw" class="label" id="labelthrow">Play</label>
<input type="checkbox" id="throw" class="cbox" value="throw" />
<div id="ball"></div>
<div id="bat"></div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Bat-ball
	*/

	@keyframes ball {
	0% {
	left: -20%;
	transform: rotate(0deg);
	}
	30% {
	top: -10px;
	}
	80% {
	left: 74%;
	top: 250px;
	transform: rotate(2020deg);
	}
	100% {
	left: 10%;
	top: -50%;
	transform: scale(.1);
	}
	}

	#throw:checked ~ div {
	animation-play-state: running;
	transform: rotate(10deg);
	transition: 0.8s 3.77s transform;
	}
	#throw:not(:checked) ~div {
	animation-name: none;
	transform: rotate(0deg);
	transition: 0s 0s transform;
	}
	input.cbox {display:none;}
	.label {
	cursor:pointer;
	position: absolute;
	color: #008080;
	font-size: 200%;
	padding: 5px 10px;
	border: 2px solid #008080;
	border-radius: 10px;
	box-shadow: 2px 2px 10px gray;
	}
	.label:hover {
	color: white;
	background: #008080;
	}

	#ball {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-image: linear-gradient(left, red, green);
	position: absolute;
	top: 250px;
	left: -20%;
	animation-name: ball;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-play-state:paused;
	}

	#bat {
	width: 10px;
	height: 300px;
	background: black;
	position: absolute;
	right: 10%;
	top: 100px;
	}
	<!-- content to be placed inside <body>…</body> -->
	<label for="throw" class="label" id="labelthrow">Play</label>
	<input type="checkbox" id="throw" class="cbox" value="throw" />
	<div id="ball"></div>
	<div id="bat"></div>