Is it possible to CSS animate relative values, I.e. width: 100%

Question

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

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.

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

@Vucko yes exactly like this, please explain what I've missed and post an answer so that I can accept it and upvote :) — Morgan Wilde, Jun 30 '13 at 19:43

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

In your example , you just have 2 errors:

Put :

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

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

And use prefixes for CSS3 animations

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

edited May 23 '17 at 10:32

Community

1
1

answered Jun 30 '13 at 19:54

Vucko

20,555
10
56
107

As I mentioned in my question, I do get a fullscreen div, so that implies I do have `html,body` set to 100% :). Other than that, thanks! – Morgan Wilde Jun 30 '13 at 19:59
1

I was testing with your code and that was missing so sorry about that. :) Glad to help :) – Vucko Jun 30 '13 at 20:01

score 0 · Answer 2 · answered Jun 30 '13 at 19:39

0

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

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

answered Jun 30 '13 at 19:39

nico94

9
1

Welcome to stackoverflow :) thanks for the heads-up on transitions, but it seems Vucko has the answer required. – Morgan Wilde Jun 30 '13 at 19:45
2

w3schools.com isn't created by W3C and it's not a very recomendable resource. See [w3fools](http://w3fools.com) for more info. – pzin Jun 30 '13 at 19:49

Is it possible to CSS animate relative values, I.e. width: 100%

2 Answers2