Как сделать @keyframes начать с текущего значения свойства?

Я пытаюсь применить эффект минимизации / максимизации к div через ключевые кадры и анимации в css. Хотя простой, не анимированный эффект сам по себе довольно прост (я уже добавил его), необходимость в отправной точке (от{...}) для кадров сводит меня с ума! Я уже пробовал с пустым из свойства, вычеркнуть его и с фиктивным, не связанным атрибутом (например, непрозрачность: 1, где непрозрачность не нужна) или с автоматическими значениями для необходимых свойств, но до сих пор мне не повезло. Так что ... вопрос в том, есть ли способ установить ключевые кадры, чтобы он начинался с текущих значений свойств div? Чтобы быть более конкретным, могу ли я расширить ширину и высоту div до заданного размера, начиная с его текущего, общего, ширины и высоты?

мой код до сих пор (соответствующих код):

@-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;
}
8
css css-animations graphics html web

1 ответов

если вы просто обеспокоены установкой конечного состояния относительно текущего состояния элемента, вы хотите transition не animation.

переходы позволяют установить желаемый результат, а затем ключевые кадры автоматически экстраполируются из текущего состояния элемента.

например, ниже-применение .minimized класс .window уменьшит его размер только с указанными конечными точками.

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