过渡&2D变换&动画

过渡

/*默认值：*/
transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease
/*简写，推荐书写顺序如下*/
 transition:transition-duration transition-property transition-timing-function transition-delay 

transition-duration

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

**transition-property **

属性值:
  none
      没有过渡动画。
  all
      所有可被动画的属性都表现出过渡动画。
  IDENT
      属性名称 （可以指定多个）

transition-timing-function

属性值:
 1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
 6、cubic-bezier： 贝塞尔曲线
 7、step-start：等同于steps(1,start)
      step-end：等同于steps(1,end)
       steps(<integer>,[,[start|end]]?)
              第一个参数：必须为正整数，指定函数的步数
              第二个参数：指定每一步的值发生变化的时间点（默认值end）

transition-delay

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

当属性的列表长度不一致时候

如下代码：

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

检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）

实例

.tran {
  width: 200px;
  height: 200px;
  background-color: aqua;
  transition: 3s all linear 0s;
}

.tran:hover {
  height: 300px;
  width: 300px;
}

class App extends React.Component {
  onTransitionEnd = (event) => {
    console.log("过渡结束", event);
  };
  render() {
    return (
      <div>
        <div className="tran" onTransitionEnd={this.onTransitionEnd}></div>
      </div>
    );
  }

变换

2D变换

transform 属性 , 只对 block 级元素生效！

缩放（scale）

X方向缩放：transform:  scaleX(2); 
Y方向缩放：transform:  scaleY(2);
X和Y缩放：transform:scale(2,2);

旋转（rotate）

transform：rotate(360deg); 
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转

平移（translate）

X方向平移:transform:  translateX(100px);
Y方向平移:transform:  translateY(100px);
二维平移:transform:  translate(100px,100px);

倾斜（skew）

X方向倾斜:transform:  skewX(45deg);
Y方向倾斜:transform:  skewY(15deg);
二维倾斜:transform: skew(45deg,15deg);
 正值:拉正斜杠方向的两个角
 负值:拉反斜杠方向的两个角

基点变换

transform-origin:center center （默认值）
left top（左上角）
top == top center （上中）
以此类推
transform-origin:10px 50px； 从图形的左上方开始，x方向正值向右，y方向正值向下

动画

简写属性animation

 animation：
           animation-name
           animation-duration
           animation-timing-function
           animation-delay
           animation-iteration-count
           animation-direction
           animation-fill-mode
           animation-play-state

关键帧（@keyframes）

语法：

@keyframes animiationName{
	from{
		css-style:css-value
	}
	to{
		css-style:css-value
	}
 }

animiationName:必写项，定义动画的名称
from：0%
 to：100%

animation-duration

animation-duration属性指定一个动画周期的时长。
值：一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

animation-timing-function

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
steps(n,[start|end]) 
   传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
   第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
   默认值为 end。

animation-iteration-count

定义了动画执行的次数
值
   infinite
       无限循环播放动画
   <number>
       动画播放的次数 不可为负值 

animation-direction

定义了动画执行的方向

值
normal
    每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
    动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭 代
reverse
    反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
    反向交替， 反向开始交替

animation-fill-mode

属于动画外的范畴，定义动画在动画外的状态，即动画还没开始或者解锁

1.animation-fill-mode: none

2.animation-fill-mode: backwards

3.animation-fill-mode: forwards

4.animation-fill-mode: both

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。我发现，这个属性好像并不起什么效果。

animation-play-state

定义了动画执行的运行和暂停

值
   running
       当前动画正在运行。
   paused
       当前动画以被停止。