1.变形(transform)
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。 位移效果
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。 缩放效果
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度(-360deg - 360deg)。 旋转效果
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。 变形效果
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
matrix(a,b,c,d,e,f) 定义 2D变形,使用了6个值的矩阵。表示如下:
a c e
b d f
0 0 1
matrix用一个3行3列的矩阵表示,a和b列表示x轴,c和d列表示y轴,e和f列表示z轴
a和d表示缩放(如果没有缩放,值设为1)
b和c表示扭曲(如果没有扭曲,值为0)
e和f表示位移(如果没有位移,值为0)
如果旋转角度为θ,它会影响到a,b,c,d的值:
a = cosθ
b = sinθ
c = -sinθ
d = cosθ
如果扭曲skew(θ1,θ2),会影响到b和c的值:
b = tanθ1
c = tanθ2
每次旋转和扭曲都会产生一个新矩阵,最终形成的多个矩阵要做乘法运算。
如果对一个元素同时有旋转、扭曲、缩放和位移,这里需要用到多个矩阵相乘,要优先考虑旋转和缩放!!!
2.transform-origin:调整元素的基点。
transform-origin: x-axis y-axis z-axis;
属性值:
x-axis :定义视图被置于 X 轴的何处。可能的值:left,center,right,length,%。
y-axis :定义视图被置于 Y 轴的何处。可能的值:top,center,bottom,length,%。
z-axis :定义视图被置于 Z 轴的何处。可能的值:length。
3.perspective
让子元素获得透视效果。
perspective:length|none;
主流浏览器都不支持,谷歌要加-webkit-,或在长度后加单位。
4. transform-style
在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)。
transform-style: flat|preserve-3d;
5.rotateZ
沿着Z轴的方向顺指针旋转。
6.transition:过渡动画
1)常规用法:
transition-property
transition-duration
transition-timing-function
transition-delay
2)简洁(复合)用法:
transition: property-name-list|all duration timing-function delay;
a)可以使用的属性有:
i)颜色:
color background-color border-color outline-color
ii)位置:
background-position left right top bottom
iii)长度:
max-height min-height max-width min-width height width
border-width margin padding outline-width outline-offset
font-size line-height text-indent vertical-align
border-spacing letter-spacing word-spacing
iv)数字:
opacity visibility z-index font-weight zoom
v)组合:
text-shadow transform box-shadow clip
vi)其它
gradient
b)duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位
c)timing-function:动画函数
i)linear:匀速
ii)ease:变速(先慢后快,最后再慢)
iii)ease-in:变速(由慢到快)
iv)ease-out:变速(由快到慢)
v)ease-in-out:变速(慢速开始,慢速结束)
vi)cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间
d)delay:动画延时时间,一般以秒(s)或毫秒(ms)为单位
7.关键帧动画
步骤:
1)设置关键帧
a)如果只有两个关键帧
@keyframes 动画名 {
0%:{样式表}
100%:{样式表}
}
或:
@keyframes 动画名 {
from:{样式表}
to:{样式表}
}
b)如果是多个关键帧
@keyframes 动画名 {
0%:{样式表}
25%:{样式表}
60%:{样式表}
...
100%:{样式表}
}
注意:这里的百分比一般是升序值,可以是0%-100%之间的做任意值,也可以是倒序。
2)实施动画
a)常规用法
animation-name:来自于@keyframes定义的动画名
animation-duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位(默认为0)
animation-timing-function:动画函数
i)linear:匀速(默认值)
ii)ease:变速(先慢后快,最后再慢)
iii)ease-in:变速(由慢到快)
iv)ease-out:变速(由快到慢)
v)ease-in-out:变速(慢速开始,慢速结束)
vi)cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间
animation-delay:动画延时时间,一般以秒(s)或毫秒(ms)为单位
animation-iteration-count:动画循环播放的次数
1)number:按设定次数循环播放(默认次数为1次)
2)infinite:一直循环播放
animation-direction:动画播放完后是否反向播放
1)normal:不反向(默认值)
2)alternate:反向
animation-play-state:动画播放或停止播放
1)paused:停止播放
2)running:播放(默认值)
b)简洁用法
animation:name duration timing-function delay iteration-count direction;