在CSS3动画结束时维护最终状态

Question

我正在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; }
}

Answer 1

尝试添加animation-fill-mode: forwards;.例如这样:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

Answer 2

如果您使用更多动画属性,则速记为:

animation: bubble 2s linear 0.5s 1 normal forwards;

持续时间为2s,线性定时功能,0.5s延迟,1次迭代计数,法线方向,前向填充模式

Answer 3

如果不使用短手版:确保animation-fill-mode: forwards为AFTER动画声明,否则将无法正常工作...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

VS

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Answer 4

使用 动画填充模式：转发；

animation-fill-mode: forwards;

该元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）。

注意：@keyframes 规则在 Internet Explorer 9 及更早版本中不受支持。

工作示例

animation-fill-mode: forwards;

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}