Поддержание конечного состояния в конце анимации CSS3

Я запускаю анимацию для некоторых элементов, которые установлены вopacity: 0; в CSS. Класс анимации применяется к onClick, и, используя ключевые кадры, он изменяет прозрачность с0 в1 (между прочим).

К сожалению, когда анимация заканчивается, элементы возвращаются кopacity: 0 (как в Firefox, так и в Chrome). Мое естественное мышление состояло бы в том, что анимированные элементы поддерживают конечное состояние, переопределяя их исходные свойства. Это не правда? И если нет, как я могу получить элемент для этого?

Код (префиксные версии не включены):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

Ответы на вопрос(3)

Ваш ответ на вопрос