为什么最后一帧动画结束后,回到起点竟然是有动画似的移动过去的,而不是瞬间移动?

来源:9-6 CSS3中设置动画播放次数

慕粉2236556370

2017-03-22 17:40

看其它的动画例子,动画结束后,图形都是瞬间回到了初始的位置,这个例子怎么不一样呢?

@keyframes move {

  0%{

    transform: translate(0);

  }

  15%{

    transform: translate(100px,180px);

  }

  30%{

    transform: translate(150px,0);

  }

  45%{

    transform: translate(250px,180px);

  }

  60%{

    transform:translate(300px,0);

  }

  75%{

    transform: translate(450px,180px);

  }

  100%{

    transfrom: translate(480px,0);

  }

}


写回答 关注

2回答

  • 爱上慕婉清6262634
    2017-10-10 09:15:39

    因为100%的那个命令(transform写成transfrom)写错了,所以100% 里面实际上是没有值的,也就是 transform: translate(0),跟0%是一样的

  • Sweet3629545
    2017-03-23 17:07:28

    你把结束的点换到开始的点或者设置动画变换

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题