CSS3转换、过渡与动画
2019-04-14 本文已影响0人
Leophen
CSS转换
CSS3 Transform（让元素在一个坐标系统中变形，可移动、旋转和缩放元素）
transform ： none / <transform-function> [ <transform-function> ]*; /*默认值：transform: none;*/兼容性：IE10+、FireFox16+、Chrome36+、Safari16+、Opera23+
2D转换 - rotate
rotate（通过指定的角度参数对原元素指定一个2D 旋转）
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /*angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转*/
2D转换 - translate
translateX(x)（仅水平方向移动）
transform: translateX(<translation-value>);
translateY(Y)（仅垂直方向移动）
transform: translateY(<translation-value>);
translate(x, y)（水平方向和垂直方向同时移动）
transform: translate(<translation-value>[, <translation-value>]); /*只写其中一个则只有水平 / 垂直移动*/
2D转换 - scale
scaleX(x)（使元素仅水平方向缩放）
transform: scaleX(<number>); /* scale()中不能用 % */
scaleY(y)（使元素仅垂直方向缩放）
transform: scaleY(<number>);
scale(x, y)（使元素水平方向和垂直方向同时缩放）
transform: scale(<number>[, <number>]);
2D转换 - skew
skewX(x)（使元素在水平方向扭曲变形）
transform: skewX(<angle>); /*逆时针deg为正，顺时针deg为负，与rotate相反*/
skewY(y)（使元素在垂直方向扭曲变形）
transform: scaleX(<number>); /*逆时针deg为负，顺时针deg为正，与rotate相同*/
skew(x, y)（使元素在水平和垂直方向同时扭曲）
transform: scaleX(<number>); /*只写其中一个则只有水平 / 垂直扭曲*/
3D转换 - rotate
rotateX（指定对象在x轴上的旋转角度）
transform: rotateX(angle);
rotateY（指定对象在y轴上的旋转角度）
transform: rotateY(angle);
rotateZ（指定对象在z轴上的旋转角度）
transform: rotateZ(angle);
rotate3d（指定对象的3D旋转角度）
transform: rotate3d(x, y, z, angle); /*参数不允许省略*/
3D转换 - translate
translateZ（指定对象Z轴的平移，看不出来）
transform: translateZ(z);
translate3d（指定对象的3D位移）
transform: translate3d(x, y, z); /*参数不允许省略*/
3D转换 - scale
缩放scaleZ（指定对象的z轴缩放，看不出来）
transform: scaleZ(z);
scale3d（指定对象的3D缩放）
transform: scale3d(x, y, z); /*参数不允许省略*/
Transform与坐标系统
transform-origin（允许更改转换元素的位置，即转轴）
transform-origin: x-axis y-axis z-axis; /*单位px / % / left / top / ...*/
CSS3 矩阵
matrix（元素2D平面的移动变换(transform)，2D变换矩阵为3*3）
transform: matrix(a, b, c, d, tx, ty); /*transform: matrix(1, 0, 0, 1, 30, 30); 对应 a=1, b=0, c=0, d=1, e=30, f=30 根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x = 0, y = 0 变换后，x=ax+cy+e=1*0+0*0+30=30，y=bx+dy+f=0*0+0*1+30=30 于是，整个元素的中心点从(0, 0)变成了(30, 30)，整个元素就发生了平移 所以transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)*/注意：matrix在FF浏览器下需添加单位，webkit内核默认px
matrix3d（元素3D的移动变换(transform)，3D变换则是4*4的矩阵）
transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1); /*等同于transform: scale3d(x, y, z);*/
CSS3 矩阵转换
矩阵matrix缩放(scale)
matrix(sx, 0, 0, sy, 0, 0) —— scale(sx, sy)
矩阵matrix旋转(rotate)
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) —— rotate(θdeg)
矩阵matrix拉伸(skew)
matrix(1, tanθy, tanθx, 1, 0, 0) —— skew(θxdeg, θydeg)
CSS3 矩阵应用
矩阵matrix镜像对称效果
y=kx.jpg
transform: matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0);
CSS3 扩展属性
transform-style（指定嵌套元素是怎样在三维空间中呈现）
-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /*默认值：transform-style: flat; 属性写在父元素上*/
perspective（指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果）
-webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; /*默认值：none*/
perspective-origin（指定透视点的位置）
-webkit-perspective-origin: x-axis y-axis; -moz-perspective-origin: x-axis y-axis; -ms-perspective-origin: x-axis y-axis; -o-perspective-origin: x-axis y-axis; perspective-origin: x-axis y-axis; /*默认值：perspective-origin: 50% 50%;*/
backface-visibility（指定元素背面(翻转后朝向)面向用户时是否可见）
backface-visibility: visible / hidden; /*默认值：visible*/
CSS3 过渡（Transition）
允许css的属性值在一定的时间区间内平滑地过渡，在鼠标单击、获得焦点、被点击或对元素任何改变中触>发，并圆滑地以动画效果改变CSS的属性值。
兼容性：IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+
transition-property（规定设置过渡效果的 CSS 属性名）
-webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms-transition-property: none / all / property; -o-transition-property: none / all / property; transition-property: none / all / property; /*参数说明 - none - all，默认值 - property(CSS属性名) 例如color、opacity...*/
transition-duration（规定完成过渡效果需要多少时间）
transition-duration: time; /*参数说明 - 规定完成过渡效果需要花费的时间（以秒或毫秒计） - 默认值是 0*/
transition-timing-function（规定速度效果的速度曲线）
transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out step-start / step-end / steps(<integer>, [ start / end ]) cubic-bezier(<number>, <number>, <number>, <number>); /*参数说明 − linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) − ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) − ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) − ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) − ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果） − step-start：等同于 steps(1, start) − step-end：等同于 steps(1, end) − steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数 第一个参数：必须为正整数，指定函数的步数 第二个参数：取值可是start或end，指定每一步的值发生变化的时间点 第二个参数：可选，默认值为end − cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/
transition-delay（定义过渡效果何时开始）
transition-delay: time; /*参数说明 - 指定秒或毫秒数之前要等待切换效果开始 - 默认值是 0*/
transition复合写法
transition: property duration timing-function delay;
CSS3动画
兼容性：IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）
animation-name（规定需要绑定到选择器的 keyframe 名称）
animation-name: keyframename / none; /*参数说明 keyframename：指定要绑定到选择器的关键帧的名称； none：指定有没有动画（可用于覆盖从级联的动画） */
Keyframes（关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置）
@keyframes animationname { keyframes-selector { css-styles; } } /*参数说明 animationname：必写项，定义animation的名称 keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%) css-styles：必写项，一个或多个合法的CSS样式属性 @keyframes animationname在style中单独写入 */
animation-duration（规定完成动画所花费的时间，以秒或毫秒计）
animation-duration: time; /*参数说明 time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果 */
animation-timing-function（规定动画的速度曲线）
animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out step-start / step-end / steps(<integer>, [ start / end ]) cubic-bezier(<number>, <number>, <number>, <number>); /*参数说明 − linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) − ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) − ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) − ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) − ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果） − step-start：等同于 steps(1, start) − step-end：等同于 steps(1, end) − steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数 第一个参数：必须为正整数，指定函数的步数 第二个参数：取值可是start或end，指定每一步的值发生变化的时间点 第二个参数：可选，默认值为end − cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/
animation-delay（规定在动画开始之前的延迟）
animation-delay: time; /*参数说明 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0 如果值为负，则动画马上开始，但会跳过相应的时间进入动画 */
animation-iteration-count（规定动画应该播放的次数）
animation-iteration-count: infinite / <number>; /*参数说明 <number>为数字，其默认值为“1”；infinite为无限次数循环 */
animation-direction（规定是否应该轮流反向播放动画）
animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit; /*参数说明 normal：正常方向 reverse：反方向运行 alternate：先正后反，并持续交替运行（需依赖infinite） alternate-reverse：先反后正，并持续交替运行（需依赖infinite） */
animation-fill-mode（规定当动画完成或当动画有延迟未开始播放时，要应用到元素的样式）
animation-fill-mode: none / forwards / backwards / both / initial / inherit; /*参数说明 none：默认值。不设置对象动画之外的状态 forwards：设置对象状态为动画结束时的状态 backwards：设置对象状态为动画开始时的状态 both：设置对象状态为动画结束或开始的状态 */
animation-play-state（规定动画运行或暂停）
animation-play-state: paused / running; /*参数说明 paused：指定暂停动画 running：默认值，指定正在运行的动画 */
animation（复合写法）
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /*参数说明 默认写在前面的时间为duration */
will-change（增强页面渲染性能）
即提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>; /*参数说明 auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化 scroll-position：表示将要改变元素的滚动位置 contents：表示将要改变元素的内容 <custom-ident>：明确指定将要改变的属性与给定的名称 <animateable-feature>：可动画的一些特征值，比如left、top、margin等 */ 兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
