【css3-04】过渡&变形

1，过渡transition

   众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。

    CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义

简写属性transition:

       transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。 

CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间

默认值：

    transition-delay: 0s

    transition-duration: 0s

    transition-property: all

    transition-timing-function: ease

注意

    在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay

推荐抒写顺序

    过渡时间  过渡样式  过渡形式  延迟时间 [，过渡时间  过渡样式  过渡形式  延迟时间]

兼容性

    transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)

1.1.transition-property

指定应用过渡属性的名称

默认值为 all，表示所有可被动画的属性都表现出过渡动画(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)

可以指定多个 property

属性值：

  none

      没有过渡动画。

  all

      所有可被动画的属性都表现出过渡动画。

  IDENT

      属性名称 （可以指定多个）

1.2.transition-duration

属性以秒或毫秒为单位指定过渡动画所需的时间。

默认值为 0s ，表示不出现过渡动画。

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

属性值

       以毫秒或秒为单位的数值

        类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s  1s,0s,1s)！

1.3.transition-timing-function

CSS属性受到 transition的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变

默认值：ease

你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

属性值：

         ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

         linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

         ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

       ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

        ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

        cubic-bezier： 贝塞尔曲线

       step-start：等同于steps(1,start)

               step-end：等同于steps(1,end)

               steps(,[,[start|end]]?)

                      第一个参数：必须为正整数，指定函数的步数

                      第二个参数：指定每一步的值发生变化的时间点（默认值end）

1.4.transition-delay

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

默认值：0s 

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变

属性值

       值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

1.5.当属性值的列表长度不一致时

transition-property:background,width,height;

transition-duration:3s,2s;

transition-delay:3s,2s;

transition-timing-function:linear;

transition-property:background,width,height;

transition-duration:3s,2s,3s;

transition-delay:3s,2s,3s;

transition-timing-function:linear,ease,ease;

超出的情况下是会被全部截掉的

不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease

1.6.检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd

（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）

在transition完成前设置 display: none，事件同样不会被触发。

2.  2D变形（transform）

2.1.旋转（rotate） 

   正值:顺时针旋转  rotate(360deg)

   负值:逆时针旋转  rotate(-360deg)

   只能设单值。正数表示顺时针旋转，负数表示逆时针旋转

2.2.平移（translate）

X方向平移:transform:  translateX(tx)

Y方向平移:transform:  translateY(ty) 

二维平移：transform:  translate(tx[, ty])； 如果ty没有指定，它的值默认为0。

可设单值，也可设双值。

       正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，

       例如transform: translate(100px);等价于transform: translate(100px,0);

2.3.倾斜（skew）

transform:skewX(45deg);

    X方向倾斜:transform:  skewX(angle)

               skewX(45deg):参数值以deg为单位 代表与y轴之间的角度

    Y方向倾斜:transform:  skewY(angle)

               skewY(45deg):参数值以deg为单位 代表与x轴之间的角度

     二维倾斜:transform:  skew(ax[, ay]);  如果ay未提供，在Y轴上没有倾斜

               skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度

                                                                        第二个参数代表与x轴之间的角度

                单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于                     transform: skew(30deg, 0);

                考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示                     只Y轴扭曲，X轴不变  

 正值:拉正斜杠方向的两个角

 负值:拉反斜杠方向的两个角

2.4.缩放（scale）

transform:scale(2);

  X方向缩放:transform:  scaleX(sx); 

  Y方向缩放:transform:  scaleY(sy);

  二维缩放 :transform:  scale(sx[, sy]);  (如果sy 未指定，默认认为和sx的值相同)  

  要缩小请设0.01～0.99之间的值，要放大请设超过1的值。

  例如缩小一倍可以transform: scale(.5);

      放大一倍可以transform: scale(2);

 如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。

 同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)

正值:缩放的程度

  负值:不推荐使用（有旋转效果）

  单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);

2.5.基点的变换

transform-origin

 transform-origin CSS属性让你更改一个元素变形的基点。