Make元素显示为html5 / css3

Question

在我的主页上，当访问主页时我会立即淡入所有内容，我希望我的徽标可以从下往上绘制而不是淡入。

我在考虑使用这样的东西：

.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px; 
border: 1px solid black;

position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
transition: 1s;
left: 0;

}

但是当访问页面时，有一个灰色框覆盖徽标，拉起并保持隐藏（或像1 px宽），因此徽标保持可见，我需要更改什么？也取出了}等等，这样它就会显示我没有忘记：）

编辑： 只是为了澄清，我希望我的徽标隐藏在一个灰色的盒子然后访问我希望它揭开并保持可见

谢谢！