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% !important;
height: 100% !important;
left: 0px !important;
top: 0px !important;
}
}
@-webkit-keyframes minWin
{
from
{
/*width: auto; or width: ;*/
/*height: auto; or height: ;*/
}
to
{
width: 200px !important;
height: 30px !important;
}
}
....
.maximized
{
/*width: 100% !important;
height: 100% !important;
left: 0px !important;
top: 0px !important;*/ Plain maximize effect. Works.
-webkit-animation: maxWin 1s normal forwards !important;
animation: maxWin 1s normal forwards !important;
}
.minimized
{
/*width: 200px !important;
height: 30px !important;*/ Plain minimize effect. Also works.
-webkit-animation: minWin 1s normal forwards !important;
animation: minWin 1s normal forwards !important;
}
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;
}