css3过渡（transition）和动画（animation）变换（transform ）

1. 过渡（transition）

菜鸟教程：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition： CSS属性名 持续时间 过渡效果(默认ease) 延迟时间(默认0)；

transition：transition-property transition-duration transition-timing-function transition-timing-function；

| 属性 | 描述

1. | transition | 简写属性，用于在一个属性中设置四个过渡属性。
2. | transition-property | 规定应用过渡的 CSS 属性的名称。
3. | transition-duration | 定义过渡效果花费的时间。默认是 0。
4. | transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。
5. | transition-timing-function | 规定过渡效果何时开始。默认是 0。

// 鼠标滑过box，延迟0.2秒 宽度从50px过渡到100px
// css 
.box {
      width: 50px;
      height: 50px;
      background: red;
      transition: width 1s ease .2s;
    }
 // html
    .box:hover {
      width: 100px;
    }

  

transition-timing-function 规定过渡效果的时间曲线。

值 属性

1. linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
2. ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
3. ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
4. ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
5. ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

2. 动画（animation）

animation：动画名称（keyframe 名称），花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */

.box1 {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: red;
      margin: 100px auto;
      animation: animation1 5s ease-in 1s;
      animation-fill-mode: backwards;
    }

    @keyframes animation1 {
      0% {
        background: red;
        opacity: 1;
      }

      50% {
        background: yellow;
        opacity: 0.5;
      }

      100% {
        background: blue;
        opacity: 0;
      }
    }

3. transform 转换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right;/* 设置旋转点，默认是中心点 */

1. 旋转rotate、 transform-origin: bottom right;/* 设置旋转点，默认是中心点 */
   transform: rotate(45deg);

 
 
 .box2 {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transform: rotate(45deg);
      background: url('./kaipin.jpg') 0 0 repeat;
      background-size: cover;
    }

2. 移动translate
   transform: translate(100px,100px);

• translateX() ： 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。
• translateY() ：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。

3. 缩放scale
   transform: scale(0.6);

• scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放）

4. 扭曲skew
   transform: skew(20deg,30deg);

• skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

5. 矩阵matrix

参考