问题:在最终图片上停止CSS动画

我正在为虚拟毕业设计一个CSS过渡脚本。我试图让动画落在最后一张幻灯片上,但一旦完成,它就会一直翻回第一张幻灯片。我不知道如何在完成的图片上停止最后的过渡。如果有人能帮我找出我做错了什么,那将是一个巨大的帮助。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
  width: 100%;   
}
li {
  position: absolute;
  left: 0;
  top:0;
}
img{
  border: 0;
  border-radius: 0;
  box-shadow: 0;
  width: 100%;
}
li:nth-child(4) {
  animation: xfade 16s 0s 1;
}
li:nth-child(3) {
  animation: xfade 16s 4s 1;
}
li:nth-child(2) {
  animation: xfade 16s 8s 1;
}
li:nth-child(1) {
  animation: xfade 16s 12s 1;
}
@keyframes xfade{
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}
<ul>
  <li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-4.jpg" /></li>
  <li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-3.jpg" /></li>
  <li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-2.jpg" /></li>    
  <li><img title="" alt="" src="https://www.harpercollege.edu/dev/homepage/images/home-slide-1.jpg" /></li>
</ul>

解决方案:

首先,添加 animation-fill-mode: forwards; 来阻止动画结束后回到开始状态。

那么,最好在动画中加入 0%和100%选择器 里面 @关键帧. 如果缺少这个选择器,动画可能会出现问题。

@keyframes xfade{
  0%, 17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92%, 100% {
    opacity:0;
  }
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

在xamarin上动态应用字体变化?

2022-9-8 17:36:16

未分类

需要将人的信息存储在一个文件中,并提取特定的信息(python)

2022-9-8 17:36:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索