How to make @keyframes start from current property value?

Question

i'm trying to apply a minimize/maximize effect to a div through keyframes and animations in css. While the plain, non-animated, effect is by itself pretty simple (i've already added it), the need for a starting point (from{...}) for keyframes is driving me mad! I've already tried with an empty from property, whitout it and with a dummy, non-related attribute (like opacity: 1, where opacity is not needed) or with auto values for needed properties, but so far i had no luck. So my question is, is there a way to set a keyframes so it starts from div's current properties values? To be more specific, can i have a div's width and height expanded to a given size starting from it's CURRENT, generic, width and height? My code so far (effect related code): ``` @-webkit-keyframes maxWin{ from { /* width: auto; or width: ; or nothing at all */ /* height: auto; or height: ; or nothing at all */ /* left: auto; or left: ; or nothing at all */ /* top: auto; or top: ; ...you know. */ } to { width: 100%…

Accepted Answer

If you are simply concerned about setting the end state relative to the present state of an element, You want a `transition` not an `animation`.

Transitions allow you to set the desired outcome and keyframes are then extrapolated automatically from the current state of the element.

e.g. in the below- applying the `.minimized` class to `.window` would reduce its size with only the endpoints specified.

```
.window{
   transition: all 250ms ease-in;
   width:  100%;
   height: 100%;
}
.minimized{
   width: 200px !important;
   height: 30px !important;
}
```

How to make @keyframes start from current property value?

Solution

Problem