簡単にアニメーション化できるように、移動パーセンテージを使用して要素を垂直方向に配置しようとしています。次の例では、y の値に関係なく、パーセンテージは要素を移動しません。
<div id="experiment-slide-display">
<div id="slide">
<div class="experiment"><div class="experiment-title">abstraction layer</div></div>
</div>
</div>
CSS:
html{width:100%;height:100%; margin: 0;}
body{overflow:hidden; margin:0; width:100%; height:100%;}
#experiment-slide-display{top: 50%; left:50%; position:absolute;border:1px solid #000000;}
#slide{height:2000px; top:-1000px; position: absolute; left:0; width:20px;}
.experiment{position: relative; -webkit-transform: translate(0%,50%); -moz-transform: translate(0%,50%); transform: translate(0%,50%); }
.experiment-title{position: absolute;}