美文网首页
CSS3动画-让状态停留在最后动画结束

CSS3动画-让状态停留在最后动画结束

作者: JiAyInNnNn | 来源:发表于2019-06-27 18:16 被阅读0次

    纯是记录自己遗忘的知识点...

    css3动画里,先写一段动画。这个动画我是要让他渐变出现,并且从上到下显示元素内容。

     @keyframes move {
             from{
                 bottom:20px;
                 opacity:0;
             }
             to{
                 bottom:0px;
                 opacity:1;
             }
         }
    

    在需要用动画的标签中,添加动画名称。以及执行时间,和执行次数。

    .animated{
            position:relative;
            animation:move 2s;
            animation-fill-mode:forwards;
        }
    

    代码中 animation-fill-mode:forwards; 就是让动画停留在最后结束。但是要记得不要在执行次数里写 infinite !!!

    补充:
    动画:animation 不需要用户动作,自己执行,可以设置动画执行次数。
    过渡:transition 需要用户动作,执行次数固定。

    相关文章

      网友评论

          本文标题:CSS3动画-让状态停留在最后动画结束

          本文链接:https://www.haomeiwen.com/subject/mkqdcctx.html