CSS3动画在结束时恢复为0不透明度

Question

当用户点击某些内容时，我正在为某些元素添加动画。默认情况下，元素为0不透明度，并在添加动画时为1不透明度。

问题：动画完成后它们会恢复为0不透明度。

我按照每个相关答案的建议添加了animation-fill-mode: forwards;，但它仍然不起作用。

我的代码：https://jsfiddle.net/9bs9g3uw/

Answer 1

您应该将最后一个关键帧设置为// My data fixture code. $test = true; $userPhoto->setImageFile(new UploadedFile($photoDir . $photoFile, $photoFile, null, null, null, $test)); 而不是100%，然后才会覆盖最初的50%规则：

.element {opacity: 0}

Updated fiddle