前端笔记

关键帧动画

步骤：
1、定义关键帧动画
 @keyframes dong{
            /* 过程：宽度从100 变成1000 */
            from{
                width: 100px;
            }to{
                width:1000px;
            }
 }
2、使用动画
animation-name:dongdong; /*动画名字  必须写*/
animation-duration:3s; /*动画的完成时间  必须写*/
animation-timing-function:linear; /*动画的执行速度 ease  ease-in ease-out ease-in-out*/
animation-iteration-count:1; /*动画执行的次数 infinite 代表无限次*/
animation-direction: alternate;/*动画的方向 alternate 轮流反向执行*/
animation-delay:1s; /*动画的延迟时间*/
animation-fill-mode:forwards; /*forwards 停在终点的动画*/
​
​
/* 复合写法 */
/* animation:名称 完成时间 速度 延迟 次数 轮流反向 是否停在终点; */
animation:dongdong 3s linear 0s 1 alternate forwards;