CSS神属性让动画停留在最后一帧

作者: 黄秀杰 | 来源:发表于2018-06-08 22:30 被阅读0次

CSS神属性让动画停留在最后一帧
css3
让动画停留在最后一帧
CSS-3D知识
CSS3 动画
CSS属性参考手册
css动画
Css动画小球横移
CSS3动画-让状态停留在最后动画结束
Android属性动画解析，让天下没有难画的动画

这里用到的动画是一个渐隐消失，原代码是这样的

bug.gif

.fadeOut {
  animation-name: fadeOutAnimation;
  animation-duration: 1s;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 100%;
  }
  to {
    opacity: 0;
  }
}

view {
  width: 100%;
  height: 300px;
  background-color: darksalmon;
}

但播放完毕后，图层又显现了，查文档发现有一个很好的属性animation-fill-mode，可以解决这个问题，

将fadeOut改造成如下即可。

.fadeOut {
  animation-name: fadeOutAnimation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

finish.gif

源代码托管在Gitee，需要的朋友可以前往下载，https://gitee.com/dotton/demo-wx

mp

CSS神属性让动画停留在最后一帧
这里用到的动画是一个渐隐消失，原代码是这样的但播放完毕后，图层又显现了，查文档发现有一个很好的属性animati...
css3
关于css3动画参数设置 animation: mybigpic 1s forwards; 让动画停留在最后一帧；...
让动画停留在最后一帧
CSS-3D知识
1.CSS动画 1.1 CSS动画属性-animation animation：为CSS动画属性，使用该属性可以替...
CSS3 动画
动画属性动画（animation）是CSS3新增的属性，动画属性可以为元素创建动画，CSS3以前在网页上实现动画...
CSS属性参考手册
CSS3 动画属性（Animation） CSS 背景属性（Background） CSS 边框属性（Border...
css动画
css动画首先要明白动画是一帧一帧的，由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧，用关键帧...
Css动画小球横移
学习css 动画，建立小球左右横移的动画原料：html5 Css3html CSS css 动画属性介绍其中an...
CSS3动画-让状态停留在最后动画结束
纯是记录自己遗忘的知识点... css3动画里，先写一段动画。这个动画我是要让他渐变出现，并且从上到下显示元素内容...
Android属性动画解析，让天下没有难画的动画
在属性动画出现之前，Android的动画包括逐帧动画、补间动画两种。逐帧动画类似于gif图片，一帧一帧的播放准备好...