首页 新闻 搜索 专区 学院

请问通过animation如何实现这种效果?

0
悬赏园豆:10 [已解决问题] 解决于 2018-01-16 16:47

现目前动画能实现了,但是不能循环播放,使用animation-iteration-count: infinite;来循环播放的时候达不到我想要的效果

快乐留给你的主页 快乐留给你 | 初学一级 | 园豆:30
提问于:2018-01-16 12:08
< >
分享
最佳答案
0

animation-iteration-count: 2147483647;

如果是循环的效果不理想,那么可以考虑将每次播放的结束帧跟开始帧连贯

收获园豆:10
junio.cn | 菜鸟二级 |园豆:445 | 2018-01-16 14:13

将每次播放的结束帧跟开始帧怎么连贯起来呢?

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 14:25

这是我理解的写法,但是不行,p1是前面四个字,p2是后面八个字

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 14:30

@快乐留给你: 这个就只能调.p1和.p2的动画时间和延迟时间,来达到.p1连贯.p2的效果了。

例(不知道这样是不是你想要的效果呢):

.p1的部分

animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 2s;

.p2的部分

animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 5s;
junio.cn | 园豆:445 (菜鸟二级) | 2018-01-16 14:52

@listen.core: 有点像了,谢谢你

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 15:05

@快乐留给你: 还有一种方式,调整动画选择器@keyframes (不需要延迟动画)

例(动画的效果自己修改哈):

.p1的部分

animation-name: mymove;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;

@keyframes mymove {
    0% {
        left:0px;
    }
    60% {
        left:100px;
    }
    100% {
        left:100px;
    }
}

.p2的部分

animation-name: mymove2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;

@keyframes mymove2 {
    0% {
        left:100px;
    }
    40% {
        left:100px;
    }
    100% {
        left:200px;
    }
}
junio.cn | 园豆:445 (菜鸟二级) | 2018-01-16 15:35

@listen.core: 

这样嘛?

.p1{
  animation-name: mymove;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
@keyframes mymove {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  0% {
    left:0px;
  }
  60% {
    left:100px;
  }
  100% {
    left:100px;
  }
}
.p2 {
  animation-name: mymove2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
@keyframes mymove2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  0% {
    left:100px;
  }
  40% {
    left:100px;
  }
  100% {
    left:200px;
  }
}

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 15:51

若是这样的话,这个实现的效果就是全部文字一起渐变循环往下移

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 15:57

@快乐留给你: 把from和to的动画变化效果,用百分比替代。

上面的例子.p1   60%到100%效果是一样的。

.p2   0%到40%效果是一样的。

也就是说: p1前60%的时间是动画的变化,后面40%的时间是执行一次后的等待。

               p2前40%时间是执行前的等待,后60%时间是动画的变化。

 

关于@keyframes可以参考这个:http://www.w3school.com.cn/cssref/pr_keyframes.asp

junio.cn | 园豆:445 (菜鸟二级) | 2018-01-16 16:07

@listen.core: 已经解决了,非常感谢

快乐留给你 | 园豆:30 (初学一级) | 2018-01-16 16:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册