本页仅用于技术研究及演示动画效果。若原作者看到,请联系我的邮箱
/*风车入*/ @-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