过渡动画transition和动画animation

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;
    }
}
css
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。