前言
分享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);
}
}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
