动画属性详解

1.transform(变形–动画的实际效果)

a.C3中支持操作

  1.旋转：rotate
  2.扭曲：skew
  3.缩放：scale
  4.移动：translate
  5.矩阵变形：matrix

b.使用介绍

rotate(旋转)

1.rotate(xxdeg)   //2D旋转
  2.rotateX()或rotateY()   //3D旋转
  旋转都是以中心为基点,deg表示旋转的角度，为负数时表示逆时针旋转

translate(移动)

translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移

scale(缩放)

  scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

skew(扭曲)

skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

c.基点介绍

1.所有的基点默认都在中心位置，我们可以使用transform-origin：(x,y)来改变元素基点

2.x指水平方向取值：left,center,right也可以设置对应的百分比位置

left=100%;center=0%;right=0%

3.y指垂直方向的取值:top,center,botton也可以设置对应的百分比

d.使用transform注意事项

1.目前transform只支持IE10+，对IE9不支持，要兼容浏览器需要添加前缀

transform:translate(10,10) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera

2.transition(设置过渡属性)

transition 属性是一个简写属性，用于设置四个过渡属性：

注意：请始终设置transition-duration，否则时长为0，不会产生过渡效果

a.transition-property 规定设置过渡效果的 CSS 属性的名称。

1.语法：transition-property: none|all|property;默认all

b.transition-duration 规定完成过渡效果需要多少秒或毫秒。

1.语法：transition-duration: time

c.transition-timing-function 规定速度效果的速度曲线。

1.语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

d.transition-delay 定义过渡效果何时开始(毫秒)。

1.语法：transition-delay: time

3.opacity(设置元素透明度)

opacity 用于指定元素透明度, 支持 0~1 之间的小数.

默认值 1-完全不透明, 0-完全透明

4.z-index(设置堆叠顺序)

a.定义

z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。

b.注意：

1.当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。

2.当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。

c.适用范围

z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。