声明

本页仅用于技术研究及演示动画效果。若原作者看到,请联系我的邮箱

使用方法

1.复制关键帧动画keyframes规则


/*风车入*/
@-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);}
    }
    

2.复制动画的实现样式


.PinwheelIn{-webkit-animation:PinwheelIn 1s ease-in-out both;animation:PinwheelIn 1s ease-in-out both;}

3.将PinwheelIn类名加入需要动画的标签中

动画属性说明

1.关键帧动画keyframes规则


@keyframes <animationname>{
    <keyframes-selector>{ <css-styles> }
    }
<keyframes-selector>有两种形式:
1.from和to;
2.百分比;

2.动画的实现样式animation


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

淡入(FadeIn) ♣ 淡出(FadeOut)

淡入
淡出

擦入(WipeIn) ♣ 擦出(WipeOut)

注:擦入擦出效果与背景图对齐设置,所在div浮动设置、定位设置,父级文字对齐设置,均有影响,选择时请注意以上外界因素。

从左至右

擦入
擦出

从右至左

擦入
擦出

从下至上

擦入
擦出

从上至下

擦入
擦出

缩放入(ZoomIn) ♣ 缩放出(ZoomOut)

缩放入
缩放出

转入(TurnIn) ♣ 转出(TurnOut)

左入左出

左转入
左转出

右入右出

右转入
右转出

上入上出

上转入
上转出

下入下出

下转入
下转出

飞入(FlyIn) ♣ 飞出(FlyOut)

飞入
飞出

旋转2D(Rotate) ♣ 旋转3D(Rotate_3D)

旋转2D

摇摆
转圈

旋转3D

X轴旋转
Y轴旋转

翻转入(TurnIn) ♣ 翻转出(TurnOut)

从下至上

翻转入
翻转出

从上至下

翻转入
翻转出

滑入(SlideIn) ♣ 滑出(SlideOut)

左入左出

滑动入
滑动出

右入右出

滑动入
滑动出

上入上出

滑动入
滑动出

下入下出

滑动入
滑动出

伸展(Stretch) ♣ 压缩(Compress)

伸展
压缩

坠入(DropIn) ♣ 坠出(DropOut)

坠入
坠出

风车入(PinwheelIn) ♣ 风车出(PinwheelOut)

风车入
风车出

发光(Shine)

发光

爆炸(Explode)

爆炸

漂浮(Flotage)

漂浮

抖动(Quiver)

抖动

眨眼(Blink)

眨眼

脉动(Pulsate)

脉动

弹跳(Bounce)

弹跳

转轴(Hinge)

转轴

帧动画(Frame)

帧动画

自定义路径(User-Defined-Path)

自定义路径

基于SVG(Base On The SVG)

基于SVG