css3 动画停留在最后一帧

html：
<p class="test">
   哈哈
</p>

css:

.test{
    width: 200px;
    height: 200px;  
    animation:bj 1s linear forwards;
    background: lightblue;
}
@-webkit-keyframes bj{
    100%{
        transform: translateX(300px);
    }
}