使用@keyframes建立动画并通过Js方式修改

一.@keyframes定义动画:
1.通过@keyframes指定动画序列.为自动补间动画相当于确定点数系统会自动计算中间过程,这些点称为关键帧.
2.通过设置百分比将动画序列分割成多个节点
3.在各个节点中分别定义各个属性
代码演示:
动画开始0%{}或者from{}
动画结束100%{}或者to{}
在CSS中创建动画

 /*创建动画*/
        @keyframes moveTest {
            /*百分比是指整个动画耗时的百分比  10s*/
            /*0%{
                transform: translate(0,0);
            }*/
            /*from:0%*/
            from{
                transform: translate(0,0) rotate(45deg);
            }
            /*0~1*/
            50%{
                transform: translate(0,500px);
            }
            /*1~2*/
            /*100%{
                transform: translate(500px,600px);
            }*/
            /*to:100%*/
            to{
                transform: translate(500px,600px);
            }
        }

调用动画

 div{
            width: 100px;
            height: 100px;
            background-color: red;
            /*添加动画效果*/
            /*1.anim