TranslateX一个对象并保持最终位置 [英] TranslateX an object and keep the final position

问题描述

我用CSS transform-translateX编写了一个测试.动画有效，但对象没有保持最终位置，而是返回到原始位置.

I wrote a test with CSS transform-translateX. The animation works but the object doesn't keep the final position, returns to the original position.

如何保持最终位置?

这里是CSS:

@-webkit-keyframes mover {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(300px); }
} 
@-moz-keyframes mover {
    0% { -moz-transform: translateX(0); }
    100% { -moz-transform: translateX(300px); }
} 
@-o-keyframes mover {
    0% { -o-transform: translateX(0); }
    100% { -o-transform: translateX(300px); }
} 
@keyframes mover {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

#box {
    position: relative;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: #666;
}

.box-mover {
    -webkit-animation: mover 2s ease-in-out;
    -moz-animation: mover 2s ease-in-out;
    -o-animation: mover 2s ease-in-out;
    animation: mover 2s ease-in-out;
}

这里是测试: http://jsfiddle.net/junihh/1v0t9vs2/

谢谢您的帮助.

推荐答案

添加 forwards 关键字.演示

.box-mover {
    -webkit-animation: mover 2s ease-in-out forwards;
    -moz-animation: mover 2s ease-in-out forwards;
    -o-animation: mover 2s ease-in-out forwards;
    animation: mover 2s ease-in-out forwards;
}

这将设置 animation-fill-mode:属性.

转发-目标将保留上一次设置的计算值执行期间遇到关键帧.遇到的最后一个关键帧取决于animation-direction的值和animation-iteration-count:

Forwards - The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:

• 来源

这篇关于TranslateX一个对象并保持最终位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！