css3动画挺在最后一帧方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3动画挺在最后一帧方法相关的知识,希望对你有一定的参考价值。

  1. .class{
                width: 200px;
                height: 100px;
                top: 100px;
                font-size: 50px;
                color: #fff;
                position: absolute;
                animation: move 1s;
                left: 200px;
                opacity: 1;
            }
            @keyframes move{
                from{
                    left: 0px;
                    opacity: 0;
                }
                to{
                    left: 200px;
                    opacity: 1;
                }
            }
    

      

  2. .class{
                width: 200px;
                height: 100px;
                top: 100px;
                font-size: 50px;
                color: #fff;
                position: absolute;
                animation: move 1s;
                animation-fill-mode: forwards;
            }
            @keyframes move{
                from{
                    left: 0px;
                    opacity: 0;
                }
                to{
                    left: 200px;
                    opacity: 1;
                }
            }
    

     

以上是关于css3动画挺在最后一帧方法的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 Animation 控制元素在动画的初始位置开始动画

CSS3帧动画

CSS3动画属性,这么简单

CSS3动画属性,这么简单

学CSS3的animation基础——妙味课堂

js动画与css3动画的区别