本页仅用于技术研究及演示动画效果。若原作者看到，请联系我的邮箱
/*风车入*/
@-webkit-keyframes PinwheelIn{
0%{opacity:0;-webkit-transform:rotate(-720deg) scale(0.33);}
100%{opacity:1;-webkit-transform:rotate(0deg) scale(1);}
}
@keyframes PinwheelIn{
0%{opacity:0;transform:rotate(-720deg) scale(0.33);}
100%{opacity:1;transform:rotate(0deg) scale(1);}
}
.PinwheelIn{-webkit-animation:PinwheelIn 1s ease-in-out both;animation:PinwheelIn 1s ease-in-out both;}
@keyframes <animationname>{
<keyframes-selector>{ <css-styles> }
}
<keyframes-selector>有两种形式：
1.from和to;
2.百分比；
animation : <name> <duration> <timing-function> <delay> <iteration-count> <direction> <play-state> <fill-mode>
动画的名称： 名称 | 无
animation-name : <animationname> | none
动画播放时间：时间
animation-duration : <time>
动画播放方式：匀速 | 加速| 加速进 | 加速出 | 加速先进再出 | 贝塞尔曲线 效果预览地址 | 马上转跳到动画结束状态 |
保持动画开始状态直到动画执行时间结束马上转跳到动画结束状态 |
number间隔数，第二个参数默认为end，设置最后一步的状态start结束时状态，end开始时状态
animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
step-start | step-end | steps([, [ start | end ] ]?);
动画延迟时间：时间
animation-delay : <time>
动画播放次数：无限 | 次数
animation-iteration-count : infinite | <n>
动画播放方向：正常 | 交替
animation-direction : normal | alternate
动画运行状态：暂停 | 运行
animation-play-state : paused | running
动画时间之外的状态：最后一帧动画 | 第一帧动画 | 向前向后填充模式都被应用 | 无
animation-fill-mode : forwards | backwards | both | none