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动画的区别