在CSS3动画结束时保持最终状态

css CSS

Gil理查德

2020-03-24

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

第3149篇《在CSS3动画结束时保持最终状态》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
西里神奇泡芙 2020.03.24

使用 animation-fill-mode：前进；

animation-fill-mode: forwards;

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

注意：Internet Explorer 9和更早版本不支持@keyframes规则。

工作实例

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}
}
<h1>The keyframes </h1>
<div></div>

神无A 2020.03.24

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

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
阳光阿飞 2020.03.24

如果您使用更多的动画属性，则简写为：

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

这给出：

  • 2s 持续时间
  • linear 计时功能
  • 0.5s 延迟
  • 1 迭代次数（可以是无穷大）
  • normal 方向
  • forward 填充模式（如果希望具有兼容性，则将其设置为最终状态，请向后设置）
番长猴子 2020.03.24

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

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

与

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android