html5——动画

基本介绍

/*执行函数gun，执行时间，重复执行，反向执行，匀速执行，延迟执行时间*/
animation: gun 4s infinite alternate linear 5s;

动画序列

1、gun是序列名称

2、通过百分比将动画序列分割成多个节点

3、在各节点中分别定义各属性

4、起始位置最好写上起始值

<style>
    @keyframes gun {
        0% {
            transform: translateX(0px) translateX(0px);
            border-radius: 0;
        }
        25% {
            transform: translateX(400px) translateX(0px);
            border-radius: 50%;
        }
        50% {
            transform: translateX(400px) translateY(400px);
            background-color: yellow;
        }
        75% {
            transform: translateX(0px) translateY(400px);
        }
        100% {
            transform: translateX(0px) translateX(0px);
            border-radius: 0;
        }
    }
</style>

关键属性

/*动画序列名称*/
animation-name: move;
/*动画持续时间*/
animation-duration: 3s;
/*动画执行次数*/
animation-iteration-count: 1;
/*动画方向*/
animation-direction: alternate;
/*动画延迟时间*/
animation-delay: 1s;
/*动画执行完毕后状态*/
animation-fill-mode: forwards;
/*运动曲线*/
animation-timing-function: linear;
/*动画分成多少步骤*/
animation-timing-function: steps(10);

 参考资料：https://blog.csdn.net/q1056843325/article/details/53308506?locationNum=2&fps=1