TranslateX 一个对象并保持最终位置答案

【问题标题】：TranslateX an object and keep the final positionTranslateX 一个对象并保持最终位置
【发布时间】：2014-12-10 01:40:11
【问题描述】：

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

怎样才能保住最后的位置？

这里是 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/

感谢您对此的任何帮助。

【问题讨论】：

标签： css transform

【解决方案1】：

添加forwards 关键字。 DEMO

.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: 属性。

Forwards - 目标将保留最后设置的计算值执行过程中遇到关键帧。遇到的最后一个关键帧取决于动画方向的值和动画迭代计数：

Source

【讨论】：