c3动画方法概述

1 转换

转换的属性 :transform

属性值 : transform-function none

转换原点 旋转过程中 ：默认是元素中心点处
属性：transform-origin

2 2 D 转换

位移： 位置的变化

缩放： 元素大小的变换 缩小 0-1 放大>1

旋转：安照一定角度 实现旋转 相当于方向改变

位移： 函数 translate(x)

缩放： 元素大小的变换 缩小 0-1 放大>1 scale（参数）

旋转：安照一定角度 实现旋转 相当于方向改变 rotate(ndeg) n为正 顺时针旋转

倾斜 skew(xdeg) 以x轴为准 skewY(20deg) 沿Y轴倾斜

3 3D转换

perspective假定人眼投射到平面的距离

该属性必须定义在父元素上 其子元素能够实现3d转换的效果

注意浏览器兼容
-webkit-perspective 兼容IE和谷歌
-o-perspective 兼容欧朋
-moz-perspective 兼容火狐

属性：transform

位移： transformZ(z);沿z轴

transform3D(x,y,z);沿xyz3个轴旋转

旋转： rotateY(ndeg)；deg角度

             rotate(x,y,z,ndeg);

4 过渡

什么是过度：

css样式属性值在一段时间内平滑的过度

属性：transition-property
取值：none 没过渡
all 所有过渡
property

允许过度的属性： 颜色 取值为数值的属性 转换-transform 渐变属性 visibility

5 过渡

属性 transition-duration 取值 s|ms 时间过渡

6 设置过度时间曲线函数

属性： transition-timing-function

取值： ease 匀速

ease-in 加速

ease-out

ease-in-out 先加速 后减速

7 过度延迟

 transition-delay

8 动画效果

关键帧 控制动画的每一步

8.1 处理兼容性问题

-moz- 兼容火狐

-webkit- 兼容IE和谷歌

-o- 兼容欧朋

-ms-

8.2 怎么来使用

1 生明动画

创建一个动画 并且指定名称 通过@keyframes 关键词生明动画的关键帧

2 为元素调用动画 动画名称

播放时间

、播放的次数

播放的方向

语法

@keyframs 动画名称{

from |0%{

//动画开始的动作 css样式

}

50%{

//动画中间的动作 css样式

}

to|100%{

//动画结束的动作 css样式

}

}
调用动画名称

属性 animation-name:

动画执行时间长度

aanimation-duration

动画执行的曲线函数

animation-timing-function 取值：ease 匀速

animation-iteration-count:infinite 无线播放次数

animation-direction-alternate 动画播放方向
alternate 轮流播放 normal 默认 reverse 逆向播放

aniation -play-state 指定动画运行还是赞同 paused