动画的最终结果是停留在100%的状态还是最初定义的状态呢?

来源:9-1 CSS3 Keyframes介绍

慕粉4169047

2017-01-18 18:39

动画的最终结果是停留在100%的状态还是最初定义的状态呢?

写回答 关注

4回答

  • 爱上慕婉清6262634
    2017-10-09 19:45:28

    回到最初设置,也就是div设置状态

    设置停留状态用这个animation-fill-mode

    animation-fill-mode:forwards; 设置为动画结束状态

    animation-fill-mode:backwards; 设置为动画开始状态

  • abbby
    2017-04-19 21:42:13

    是还原到动画之前的颜色,并不是0%{}时设定的颜色

  • 老司机tony
    2017-01-21 10:41:14

    最终状态还是变成最初始的状态,很简单测验一下,就是你吧案例的的100%时背景色改成黑色,你会发现动画到变成黑色之后,又变回红色(即最初的颜色)。

    @keyframes changecolor{
      0%{
        background: red;
      }
      20%{
        background:blue;
      }
      40%{
        background:orange;
      }
      60%{
        background:green;
      }
      80%{
        background:yellow;
      }
      100%{
        background: black;
      }
    }


  • 慕粉4169047
    2017-01-18 18:40:00

    写错 是状态 

十天精通CSS3

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

242553 学习 · 2623 问题

查看课程

相似问题