汇总之--css3 animation

个人博客
如有错误请指正谢谢大家

动画的使用

• 动画的使用必须要准备：
  
  • 1.准备动画 @keyframes 关键字定义
  • 2.需要为想要使用动画的dom元素 添加一系列的动画属性

动画的定义

• 基本方法

@keyframes toright{
            from{
                /* from中如果不设置 默认使用的是 初始状态 */
            }
            to{
                transform: translateX(800px);
            }
         }

        /* 准备一个class 内部定义了动画的各种效果 */
        .animation{
            /* 动画的名字 */
            animation-name: toright;

            /* 动画持续多久 */
            animation-duration: 2s;

            /* 设置动画的次数 
                动画次数
                可以给具体的值
                infinite 无限
            */
            animation-iteration-count: infinite;

            /* 动画的速度 线型 */
            animation-timing-function: linear;

            /* 动画的延迟事件 */
            animation-delay: 2s;
        }
        /* 动画属性的复合写法 */
        .animation-oneline{
            /* 复合写法 
                属性的顺序 是可以随意调换的
                第一次出现的时间 是持续时间
                第二次出现的时间 是延迟时间
                如果只写了一个时间 默认就是 持续时间
            */
            /* animation: toright 1s 2s linear infinite ; */
            /* animation: linear  infinite 1s 2s    toright; */
            animation: linear  1s 2s    stepAnimation;
        }

• 精准的设置动画过程

@keyframes stepAnimation{
            /* 起始状态 */
            0%{

            }
            /* 动画的一半 移动到屏幕的 最右边 */
            50%{
                transform: translateX(1000px);
            }
            /* 返回到起始的位置 */
            100%{
                transform: translateX(0);
            }
        }