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

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

放：

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;

Fiddle of your example

Browser support

注意：使用-webkit-animation-fill-mode: forwards;，以便动画完成后不会返回原始状态。 Reference

Answer 2

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

在CSS3中，您可以使用Transitions进行动画处理。查看此网站（由W3C创建）以获取更多信息：CSS3 Transition / w3schools.com

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

是否有可能CSS为相对值设置动画，即。宽度：100％

2 个答案: