SirPepe/dabblet.css

## dabblet.css
/**
 * Vorhang-Effekt (Lösung)
 */

/* Container */
#Box {
  position: relative;
  background:blue;
  color: blue;
  text-align: center;
  padding: 3em;
  font-size: 2em;
}

/* Vorhänge */
#Box div {
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
}
#Box div:last-child {
  left: 50%;
  right: 0;
}

/* Zustände */
#Box:hover {
  color: yellow;
}
#Box:hover div:first-child {
  right: 100%;
}
#Box:hover div:last-child {
  left: 100%;
}

/* Transition-Eigenschaften */
div {
  transition-property: color, left, right;
  transition-duration: 2s;
}
#Box {
  transition-delay: 2500ms;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="Box">
  <div></div>
  Hallo Welt!
  <div></div>
</div>

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

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Vorhang-Effekt (Lösung)
	*/

	/* Container */
	#Box {
	position: relative;
	background:blue;
	color: blue;
	text-align: center;
	padding: 3em;
	font-size: 2em;
	}

	/* Vorhänge */
	#Box div {
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 50%;
	}
	#Box div:last-child {
	left: 50%;
	right: 0;
	}

	/* Zustände */
	#Box:hover {
	color: yellow;
	}
	#Box:hover div:first-child {
	right: 100%;
	}
	#Box:hover div:last-child {
	left: 100%;
	}

	/* Transition-Eigenschaften */
	div {
	transition-property: color, left, right;
	transition-duration: 2s;
	}
	#Box {
	transition-delay: 2500ms;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="Box">
	<div></div>
	Hallo Welt!
	<div></div>
	</div>