css animation动画的属性以及简写方法

前言

分享css animation动画的属性以及简写方法给大家，希望能给大家带来帮助。

HTML中动画的常用属性

/* 调用动画? */
             animation-name: move; 
            /* 完成所需时间? */
             animation-duration:5s; 
            /* 运动曲线 默认ease是慢快慢，linear是匀速*/
             animation-timing-function: ease; 
            /* 开始时间 */
           	 animation-delay: 0.1s; 
            /* 播放次数  indinite为无限*/
             animation-iteration-count: 3; 
            /* 结束后是否逆向播放 alternate为是  normal为否*/
             animation-direction: alternate; 
            /*结束状态 backwards为默认  forwards为停住不回去*/
            animation-fill-mode: backwards;

简写方法

/*  简写   名字   时间   曲线    开始时间   次数    逆向还原    结束状态是否回去*/
animation: move   2s   linear      2s      999   alternate     forwards ;

特殊属性

/* 播放状态，常用于鼠标移入控制 默认running  停下为paused */
 	 animation-play-state: paused；

学习后自己随便写的简易动画

.donghua {	
			width: 100px;
            height:100px;
            background-color: #940505;
            animation: move 2s linear 2s 999 alternate forwards;
            position: absolute;
            top: 35%;
            left: 35%;
            animation: move 2s linear 999 alternate forwards;

@keyframes move {
            /* 定义动画0-100% */
            0% {
            }
            25% {transform: translate(500px,0) rotate(-360deg) scale(1.5);

}
            50% {transform: translate(500px,500px) rotate(-720deg) scale(0.5);

            }
            75% {transform: translate(0,500px) rotate(-1080deg) scale(1.5);
}
            100% {
                transform: translate(0) rotate(-1440deg) scale(0.5);
            }
        }