css动画如何从顶部移动到底部？

Question

想做一个图片上下移动的动画效果，用translateY(100%)，图片只能移动到下图中那个位置，不能移动到move的底部，如何调整

<div class="move">
    <div class="ximg-09"><img src="${base}/static/h5/images/ximg-09.png"></div>
</div>

.move{
    width: 23%;
    height: 95%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.move .ximg-09{
    height: 10rem;
    top: 0;
    display: block;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: move;
    animation-name: move;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}
.move img{
    height: 100%;
    display: block;
}
@-webkit-keyframes move {
    0%{
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100%{
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

Answer 1

transform translate的百分比时相对于元素自身的而言的