css - 是否可以对相对值进行 CSS 动画处理，即宽度：100%

Question

我正在阅读 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()？

Answer 1

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

放 ：

html, body{
    width:100%;
    height:100%;
}

所以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-animation-fill-mode: forwards;这样动画在完成时不会返回到原始状态。参考

Answer 2

首先，我是新来的，所以也许我的答案不是最好的。

在 CSS3 中，您可以使用过渡制作动画。查看此网站（由 W3C 创建）了解更多信息：CSS3 Transition / w3schools.com

我希望这个答案对你有点帮助。