玩转CSS的动画

css3 新增了两种动画

transition和animation两种方式实现
注意在这之前 一种是使用css的hover伪类属性方式 和 用js改变css属性方法
(这里有个问题就是 元素的状态立即改变变化了 没有过渡的过程) css3新增的transition就可以解决这个问题

简写语法

  //简写语法 
    transition:参1 参2 参3 参4 
    property            规定设置过渡效果的css属性的名称        名字     
    duration            规定完成过渡效果需要多少秒或者毫秒      执行时间 
    timing-function     规定速度效果的速度曲线                 效果  
    delay               定义过渡效果何时开始                   延时 
复制代码

这是有个demo

   .div{
        width: 100px;
        height: 100px;
        background:red;
        //添加过渡 
        transiton: 1s;       //即transiton: all 1s; 
    }
    .div:hover{
        width: 200px;
        height: 200px;
        background: #000;    
    }
    //transiton没有设置参1 名字   就是说默认 所有发生变化的状态都会应用过渡 
    //如果只需要某个特定属性发生过渡变化 写明就可以了 
        .div{
            width:100px;
            height:100px;
            background:red;
            //添加多个过渡      //关键代码
            transition:background 1s,width 2s height 3s; 
        }
        .div:hover{
            width:2000px;
            height:10;
            background:pink;
        }  
复制代码

animation 更强大 同样是上面的效果

.div{
        width:100px;
        height:100px;
        background:red;
    }
    .div:hover{
        animation:move 1s linear;
    }
    @keyframes move{
        100%{                     //这里可以用to{...}from{...} 20%{...}40%{..}
            width:100px;
            height:3000px;
            background:pink;
        }
    }
    
    //语法简写
    //animation:
        name             来调试@keyframes定义好的动画 跟@keyframes定义的动画名称一样 
        duration         指定元素播放动画 持续的时间 
        timing-function  规定速度效果的速度曲线 
        delay            在绘制dom树出来之前 整个animation执行之前等待的时间 (即延迟多少时间)
        iteration-count  定义动画播放次数 具体次数 或 无限循环(infinite)
        direction        设置动画播放的方向 
                             [normal-按时间轴顺序] 
                             [reverse-时间轴反方向运行] 
                             [alterbate-轮流 即来回往复进行]
                             [alternate-reverse-动画先反后正运行 并持续交替运行]
        play-state     控制元素动画的部分状态 通过这个来控制 动画的暂停和继续 两个值 running(继续) paused(暂停)
        fill-mode;     控制动画结束后 4个值 
                             [none-回到动画没开始的状态]
                             [forwards-动画结束后动画停留在 结束状态]
                             [backwords-动画回到第一帧]
                             [both-]
复制代码

animation 和 transition的不同？

keyframes提供了更多的控制 尤其是时间轴 使其更加强大
css动画实现中常见的一些 易混淆概念
animation(动画)用于设置动画属性 有个简写的属性 包含6个属性
transtion(过渡)用于设置元素的也是过渡
transform(形变)用于元素进行旋转 缩放 移动 倾斜
none 定义不进行旋转
translate() scale() rotate() skew()

仅供参考，在这儿推荐大家应该位置id上面是比较优秀的c3动画
仅供参考，loding动画