transition过渡动画

//过渡动画三要素
//1，属性发生改变
//2，哪个属性执行过渡动画
//3，过渡时长

transition-property:width,background-color;
transition-duration:5s,4s;

//linear匀速 ease慢快慢 ease-in慢快 ease-out快慢 ease-in-out慢快慢 cubic-bezier(n,n,n,n)自定义速度0-1之间的数
transition-timing-function:ease;

transition-delay:2s;

//简写 最后的是延迟时间
transition: width 1s linear 2s;

//
transition:all 2s;

动画

//动画与过渡动画都需要三要素，过渡动画需要主动触发，动画不需要 name duration 不可省略
animation: name duration timing-function delay iteration-count direction fill-mode;

animation-name: testAnimation;
animation-duration: 3s;
animation-delay: 1s;
animation-timing-function:ease;
//动画需要被执行几次 infinite 无限执行
animation-iteration-count:2;
//是否往返动画 默认normal
animation-direction:alternate;
/*规定对象动画时间之外的状态 none 默认
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内(等待时间)，在动画显示之前，应用开始属性值（在第一个关键帧中定义 0% 状态）。
both 向前和向后填充模式都被应用（等于上面两个都设置了）。
*/
animation-fill-mode:forwards;

//paused暂定 默认正在执行running（可以动态控制动画）
animation-play-state:running;

//@keyframes 规定动画
 @keyframes testAnimation{
    from{
        margin-left: 0;
    }
    to{
        margin-left: 100px;
    }
}
@keyframes otherAnimation{
    0%{
        left: 0;
    }
    10%{
        left: 10px;
    }
    30%{
        left: 30px;
    }
    50%{
        left: 30px;
        top:30;
    }
    70%{
        left: 0px;
        top:30;
    }
    100%{
        left:0px;
        top:30;
    }
}