在关键帧规则的“from”关键字中将元素的属性设置为默认值答案

【问题标题】：set the element's property to a default value in "from" keyword of keyframes rule在关键帧规则的“from”关键字中将元素的属性设置为默认值
【发布时间】：2014-06-19 22:52:09
【问题描述】：

通过使用 keyframes 规则的 from 和 to 关键字，通过指定相关元素的所需属性来声明动画。但是，from 关键字似乎期望元素的属性具有预定义的值 - 我尝试过 auto、inherit、initial 等无济于事。问题是我想通过指定top来下移一个元素，但是我不知道初始值（可以用js实现，但我希望有不同的解决方案）。

这是两个小提琴：

http://jsfiddle.net/v4m92/

和

http://jsfiddle.net/hExdU/

@keyframes kf {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

不同之处仅在于给 top 一个预定义的值 - 因为可以看出动画仅在 1 个示例中有效。有没有什么办法可以在不使用 javascript 确定尺寸并修改底层动画规则的情况下使另一个工作？

【问题讨论】：

用transform: translateY(XX)代替top怎么样？这样top 的初始值就无关紧要了，jsfiddle.net/hExdU/1 可能不适合您的需求。

标签： javascript html css

【解决方案1】：

就像 2rror404 建议的那样，您可以使用 CSS 转换来完成同样的事情。

@keyframes kf {
    from {
        transform: translateY(0);
   }
    to {
        transform: translateY(100px);
    }
}

（为简洁起见，没有浏览器前缀）

【讨论】：