美文网首页
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动画-让状态停留在最后动画结束

    纯是记录自己遗忘的知识点... css3动画里,先写一段动画。这个动画我是要让他渐变出现,并且从上到下显示元素内容...

  • css3

    关于css3动画参数设置 animation: mybigpic 1s forwards; 让动画停留在最后一帧;...

  • 复习

    动画历史回顾:gif动画->flash动画->js动画->css3动画 过渡动画(即补间动画):用于实现两种状态的...

  • AnimationEnd 事件侦听

    CSS3 动画结束时是有触发事件的,这个之前竟然不了解。。除了JS动画如果做纯css3动画的时候使用 delay ...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • css3动画animation-fill-mode

    以前没有注意到的一个问题,就是你在使用css3动画@keyframes后,动画一结束又会变成原来的状态,这个就很烦...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

网友评论

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

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