是否可以用CSS设置相对值的动画，即宽度：100%

我正在阅读CSS动画/关键帧，因为我总是喜欢从相对值开始，所以我将以下内容放在一起：

div.frame {
    animation-name: saturn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    background-color: rgba(128, 255, 128, 1);
    width: 100%;
    height: 100%;
}

/* animations */
@keyframes saturn {
    from {
        width: 100%;
        height: 100%;
    }
    to {
        width: 90%;
        height: 90%;
    }
}

这并没有产生任何结果，只是一个普通的老式绿色全屏div

---

能否为CSS提供动画的相对大小，即父级的百分比？或者它与jQuery

.animate（）

的情况相同？

首先，我是新来的，所以我的答案可能不是最好的

在CSS3中，可以使用变换设置动画。 查看此网站（由W3C创建）以了解更多信息：

---

我希望这个答案对您有所帮助。

在您的示例中，您只有两个错误：

付诸表决：

因此

div

可以使用它的父级

width

和

height

并为CSS3动画使用前缀

例如：

-webkit-animation-name: saturn;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-moz-animation-name: saturn;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: 1;

---

注意：使用

-webkit动画填充模式：向前以便动画完成后不会返回到原始状态
 ？@Vucko是的，正是这样，请解释我错过了什么，然后发布一个答案，这样我就可以接受并投票：）欢迎来到stackoverflow：）谢谢你对过渡的提醒，但Vucko似乎有必要的答案。W3C并没有创建w3schools.com，它也不是一个非常值得推荐的资源。更多信息请参见。正如我在问题中提到的，我确实得到了一个全屏div，这意味着我确实将
html，body
设置为100%：）。除此之外，谢谢！我正在用您的代码进行测试，但代码丢失了，对此我深表歉意。：）很乐意帮忙：）
-webkit-animation-name: saturn;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-moz-animation-name: saturn;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: 1;