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

I'm reading up on CSS animations/keyframes and since I always like to start with relative values, I put together this:

我正在阅读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%;
    }
}

And this produces exactly no result, just a plain-old green full screen div.

这完全没有结果,只是一个普通的绿色全屏div。

Can CSS be given relative sizes for animations, I.e. percentages of parents? Or is it the same story as with jQuery .animate()?

CSS可以给动画的相对大小,即。父母的百分比?或者它是与jQuery .animate()相同的故事?

2 个解决方案

#1

In your example , you just have 2 errors:

在您的示例中,您只有2个错误:

Put :

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

So the div can use it's parents width and height.

所以div可以使用它的父母宽度和高度。

And use prefixes for CSS3 animations

并使用CSS3动画的前缀

Example:

-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

Note : use -webkit-animation-fill-mode: forwards; so the animation won't return to original state when it finishes. Reference

注意:使用-webkit-animation-fill-mode:forwards;因此动画完成后不会返回原始状态。参考

#2

First of all, I´m new here, so maybe my answer is not the very best.

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

In CSS3 you can animate using Transitions. Check this website (created by W3C) for more information: CSS3 Transition / w3schools.com

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

I hope this answer is a little bit helpful for you.

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

#1