Untitled

dabblet.css

@keyframes slide-up-fade-in {    
	0% {        display:none;        opacity: 0.25;    }    
	1% {        display: block ;        opacity: 0;    }    
	100% {        display: block ;        opacity: 1;    }
}

.menu {
	height: 100px;
	background: red;
}

.animation {
	transition: all 0.3s ease-out;
}

.collapsed {
	opacity: 0;
	transform: translateY(100px);
}

.trigger {
	padding: 10px;
}

dabblet.html

<button class="trigger">Toggle</button>
<div class="menu collapsed"></div>

dabblet.js

var trigger = document.querySelector('.trigger');
var menu = document.querySelector('.menu');
var open = 0;

trigger.addEventListener('click', function() {
	open = !open;
	if(open) {
		menu.classList.remove('collapsed');
	} else {
		menu.classList.add('collapsed');
	}
}, false)

settings.json

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