CSS-анимация – инициализировать анимацию в последнем кадре ⇐ CSS

[Anonymous]

Я делаю CSS-анимацию внутри модального диалога. Вот соответствующий SCSS:

Код: Выделить всё

      @keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}

@keyframes shrink {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}

$duration: 0.5s;
$animationFillMode: both;

&:not(.active):hover, &.active {
img {
animation: grow $duration $animationFillMode;
}
}

&:not(.active) {
img {
animation: shrink $duration $animationFillMode;
}
}

Это работает хорошо, но проблема в том, что когда я открываю модальное окно, анимация включается сразу. Например, поскольку при первом открытии модального окна я не навожу курсор на один из элементов, элемент мгновенно сжимается от большого к маленькому. Я хочу, чтобы элемент начинался в маленьком состоянии, когда модальное окно открыто.
Возможно ли это?

Подробнее здесь: https://stackoverflow.com/questions/676 ... last-frame