CSS3动画 动画序列 动画常见属性

制作动画的步骤

1.先定义动画

2.再使用调用动画

 

 

 

定义动画

@keyframes 动画名称{

           /* 开始状态 */

            0%{

                transform:translateX(0px);

            }

            /* 结束状态 */

            100% {

                transform:translateX(1000px)

            }

        }

}

调用动画

在要用的元素中调用

            /* 调用动画 */

            animation-name: 动画名称;

            /* 持续时间*/

            animation-duration: 持续时间;

 

 

动画序列   

1.可做多个状态的变化    from to =0% 100%

2.里面的百分比必须是整数

3.里面的百分比指总的时间的划分