CSS3之转换 、过渡 、动画

1、转换
1、转换的简介
1、什么是转换
改变元素在页面中的形状，位置，大小，角度的一种效果
在页面中 允许 实现 
1、2D转换
允许元素在x轴 和 y轴上做转换效果
2、3D转换
允许元素在x轴，y轴和z轴上做转换效果
2、转换属性
1、transform
属性：transform
取值：指定一组转换函数,多个转换函数之间用空格隔开
2、转换的原点
属性：transform-origin
取值：数值/百分比/关键字
两个值：原点在 x轴 和 y轴的位置
三个值：原点在 x轴，y轴，z轴的位置
2、2D转换
1、2D-位移
改变元素在页面中的位置
语法：
属性：transform
取值：
translate(x)
改变元素在x轴的位置
取值为正，右移
取值为负，左移
translate(x,y)
x : 改变元素在x轴的位置
y : 改变元素在y轴的位置
取值为正，下移
取值为负，上移
translateX(x)
改变元素在x轴的位置
translateY(y)
改变元素在y轴的位置
2、2D-缩放
改变元素在页面的默认大小
语法：
属性：transform
取值：
1、scale(value)
指定x轴和y轴的缩放比例(倍数)
2、scale(x,y)
分别指定x轴和y轴的缩放比例
3、scale(x)
指定x轴缩放比例
4、scale(y)
指定y轴缩放比例


函数值：
默认 1
缩小：0 - 1 
放大：大于1
3、2D-旋转
改变元素在页面中的角度
语法：
属性：transform
取值：rotate(ndeg)
根据转换的原点实现角度的旋转
n 取值为正，则顺时针旋转
n 取值为负，则逆时针旋转
注意：
1、转换原点
2、坐标轴也跟着旋转
4、2D-倾斜
改变元素在页面中的倾斜角度，即形状
语法：
属性：transform
取值：
skew(xdeg)
向x轴产生倾斜效果
实际是改变y轴的倾斜角度
取值为正，y轴逆时针倾斜
取值父负，y轴顺时针倾斜
skew(xdeg,ydeg)
xdeg ：向x轴产生倾斜效果
ydeg ：向y轴产生倾斜效果
实际是噶变x轴的倾斜角度
取值为正，x轴顺时针倾斜
取值为负，x轴逆时针倾斜
skewX(xdeg) :
skewY(ydeg) :
3、3D转换
1、perspective 属性
1、作用
模拟人眼到投射平面的距离
2、注意
该属性要添加在3D转换元素的父元素上，其子元素允许实现3D的转换效果
3、语法
perspective : 数值;
Chrome & Safari : -webkit-perspective
2、3D旋转
1、作用
允许使得元素在x轴，y轴，z轴上进行旋转的操作
2、语法
属性：transform
取值：
1、rotateX(xdeg)
以 x轴 作为中心轴去旋转元素
2、rotateY(ydeg)
以 y轴 作为中心轴去旋转元素
3、rotateX(zdeg)
以 z轴 作为中心轴去旋转元素
4、rotate3d(x,y,z,ndeg)
x,y,z 如果取值大于0，则说明该轴参与旋转
ndeg ， 旋转角度是多少
rotate3d(1,0,0,45deg)
rotate3d(1,1,1,45deg)
3、3D位移
1、作用
改变元素在z轴上的位置
2、语法
属性：transform
取值：
1、translatez(z)
2、translate3d(x,y,z)


属性：transform-style
作用：指定子元素的排列方式
取值：
1、flat
默认值，不保留其子元素的3d位置
2、preserve-3d
保留其子元素的3d位置,即允许子元素呈现出3d的位置排列
2、过渡
1、什么是过渡
使得CSS属性值，在一段时间内平缓变化的效果
2、过渡的基本要素 & 属性
1、指定过渡的属性
1、作用
指定哪个属性值在变化的时候使用过渡的效果
属性：transition-property
取值：
1、none ：不使用过渡，默认
2、all ：所有属性全部使用过渡
3、property ：指定属性名称
允许使用过的效果的属性：
1、颜色属性
2、取值为数值的属性
3、转换属性
4、渐变
5、visibility属性
6、阴影属性
ex:
1、transition-property:background;
2、trnasition-property:transform;
2、指定过渡时间
1、作用
指定一个过渡效果在多长时间内完成
注意：必须指定过渡时间，否则没有效果
2、语法
属性：transition-duration
取值：以 s | ms 作为单位的数值
3、ex
transition-duration:300ms;
3、指定过渡的速度时间曲线函数
1、作用
指定变化速率
2、属性
transition-timing-function
取值：
1、ease
默认值，慢速开始，快速变快，慢速结束
2、linear
匀速
3、ease-in
慢速开始，加速结束
4、ease-out
快速开始，减速结束
5、ease-in-out
慢速开始和结束，中间先快后慢
3、ex
transition-timing-function:linear;


4、过渡延迟
1、作用
用户激发过渡操作后，等待多长时间后在显示效果
2、语法
属性：transition-delay
取值：以 s | ms 为单位的数值
5、过渡的简写方式
transition:property duration timing-function delay;
ex:
transition:background 1s linear,border-radius 2s linear;
3、动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式的效果
动画是复杂的过渡效果
2、实现动画的步骤
1、声明动画
是一个独立的规则
包含动画的名称以及关键帧
关键帧：
元素在 某个时间点上的状态
2、为元素调用动画
让元素调用指定的动画并且指定时间等参数
3、声明动画
语法
@keyframes 动画名称{
0% | from{
动画开始时，元素的样式
}

...
50%{
动画执行到一半时，元素的样式
}
...


100% | to{
动画结束时，元素的样式
}
}


@-webkit-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-o-keyframes 动画名称{}
4、动画属性
注意：浏览器兼容性，使用之前加浏览器前缀
1、指定调用动画名称
属性：animation-name
2、指定动画的执行时长
属性：animation-duration
取值：s | ms
3、指定动画的速度时间曲线函数
属性：animation-timing-function
取值：ease,linear,ease-in,ease-out,ease-in-out
4、指定动画的延迟
属性：animation-delay
取值：s | ms
5、指定动画播放次数
属性：animation-iteration-count
取值：
1、具体数值
2、infinite ：无限次播放
6、指定动画的播放方向
属性：animation-direction
取值：
1、normal
正常，从0% 到 100%
2、reverse
逆向播放，从100% 到 0%
3、alternate
轮流播放
奇数次数从 0 - 100
偶数次数从 100 - 0
7、动画的简写属性
属性：animation
取值：name duration timing-function delay iteration-count direction;


8、指定动画的填充模式
1、作用
指定动画播放前后，关键帧的状态
2、属性
animation-fill-mode
取值：
1、none
默认值，无填充
2、forwards
动画完成后，保持在最后一个帧状态上
3、backwards
动画播放前(延迟时间内)，元素会保持在第一帧的状态上
4、both
动画播放前后分别显示在第一帧和最后一帧状态上
9、指定动画播放状态
指定动画是播放还是暂停
属性：animation-play-state
取值：
1、paused
暂停
2、running
播放