css3动画

css3动画特效

一、transform（转换动画、直接动画）

1.rotate（旋转）

• 包含三种状态，x、y、z三轴的变化
• rotatex、rotatey、rotatez（默认）
• 旋转（rotate）实例

2.translate（平移）

• 包含三种状态，x、y、z三轴的变化
• translatex（默认）、translatey、translatez
• 平移（translate）实例

3.skew（变形）

• 包含两种状态，x和y的变化
• skewx（默认）、skewy
• 变形（skew）实例

4.scale（伸缩比例）

• scale两个参数时，分别是宽度和高度的比例
• scale一个参数时，是等比例缩放
• 伸缩比例（scale）实例

transform相关补充：

• transform-orgin:2d，3d转换中心的设置
• transform-style:preserve-3d;2d转化为3d动画

二、transition（过渡动画）

1.transition相关补充

• transition-property过渡的属性
• transition-delay延迟时间
• transition-duration动画过渡时间
• transition-timing-function过渡效果的时间曲线：linear（匀速）、ease（慢-快-慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始、结束慢）

2.示例

• 实例1

• 实例2

三、animation（帧动画）

• 当在@keyframe创建动画，把它绑定到一个选择器

1.animation相关补充

• animation-name规定 @keyframes 动画的名称
• animation-duration执行动画所需时间。默认是0
• animation-timing-function 规定动画的速度曲线 。默认是ease
• animation-delay 延迟时间。默认时0
• animation-iteration-count 规定动画被播放的次数。默认是 1
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 ：normal（正常）、reverse（动画反向播放）、alternate（奇数时正向播放，偶数时反向播放）、alternate-reverse（奇数时反向播放，偶数式正向播放）

2.示例

• 实例1：弹球动画

• 实例2