Transition on transform translate not working - css

Question

Does anybody know how to animate the transition the right way? As you can see in the code, after a small delay the div has to move up. I couldn't get it to work.
Codepen:
http://codepen.io/thijs-webber/pen/jqgPrK
HTML:
<div class="test">
test
</div>
CSS:
.test{
background-color: lime;
width: 100px;
margin: 0 auto;
margin-top: 100px;
height: 100px;
padding: 10px;
text-align: center;
line-height: 100px;
-moz-transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-o-transform: translate(0, -100px);
-ms-transform: translate(0, -100px);
transform: translate(0, -100px);
transition: transform 1s ease-out;
-webkit-transition: transform 1s ease-out;
-moz-transition: transform 1s ease-out;
-ms-transition: transform 1s ease-out;
-o-transition: transform 1s ease-out;
transition-delay: 1s;
}

Answer 1

Using a trigger is one idea, but If you don't want any trigger, you just have to use CSS3 keyframes
Here's your code with it:
.test{
background-color: lime;
width: 100px;
margin: 0 auto;
margin-top: 100px;
height: 100px;
padding: 10px;
text-align: center;
line-height: 100px;
-moz-transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-o-transform: translate(0, -100px);
-ms-transform: translate(0, -100px);
transform: translate(0, -100px);
-moz-transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-o-transform: translate(0, -100px);
-ms-transform: translate(0, -100px);
transform: translate(0, -100px);
animation-name: moveUp;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#keyframes moveUp {
0% {
transform: translate(0);
}
100% {
transform: translate(0, -100px);
}
}
<div class="test">
test
</div>
I added the necessary animations styles, such as name (used in the keyframes), how many times should this animation occur, the timing-function and the duration, respectively:
animation-name: moveUp;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
I hope this helps!

Answer 2

It works, but due to there is no trigger, you can't observe its movement. When you loaded the page, transition had already been completed. If you want to observe transition, there should be a trigger like hover or you can use animation css method. In snippet hover is a trigger. As I said if you want it to work when page is opened, you can use animation.
.test{
background-color: lime;
width: 100px;
margin: 0 auto;
margin-top: 100px;
height: 100px;
padding: 10px;
text-align: center;
line-height: 100px;
transition: transform 1s ease-out;
-webkit-transition: transform 1s ease-out;
-moz-transition: transform 1s ease-out;
-ms-transition: transform 1s ease-out;
-o-transition: transform 1s ease-out;
}
.test:hover{
-moz-transform: translate(0, -100px);
-webkit-transform: translate(0, -100px);
-o-transform: translate(0, -100px);
-ms-transform: translate(0, -100px);
transform: translate(0, -100px);
}
<div class="test">
test
</div>