动画的属性

速度曲线表格:

含义
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量(步长)

延迟时间:

就是指这个动画需要延迟多久再去播放
animation: big 10s 10s;

重复次数:

animation: big 10s 10s 5;

这样就是这个动画重复执行五次

animation: big2 1s infinite;

这样就是无限循环执行

<style>
            .ff{
                width: 100px;
                height: 30px;
                background-color: burlywood;
                /*动画方向alternate使动画来回滚动*/
                /* animation: ff 1s infinite alternate; */
                /*backwards是动画执行完毕后恢复原始状态*/
                /*backwards就是动画默认执行完的状态可以不需要写*/
                /* animation: ff 1s backwards; */
                
                /*forwards是动画执行完毕后不会回到最初的状态*/
                animation: ff 1s forwards;
            }
            
            @keyframes ff{
                from{
                    width: 0px;
                }
                top{
                    width: 100px;
                }
            }
                
                
        </style>

您可能还喜欢...