3. transform transition animation+@keyframes

1. transform (2D)

---

transform 提供了多种2D转换的方法

translate(): 移动
rotate(): 旋转
scale()：缩放
scaleX()
scaleY()
skew()：倾斜
skewX()
skewY()
matrix()：矩阵

1.1 translate()

沿x、y轴移动
translate(x, y)、translateX(x)、translateY(y)

translate(5px) // x和y轴移动5px

translate(5px, 10px) 
translateX(5px) translateY(10px) // x移动5px，y移动10px

1.2 rotate()

沿X、Y、Z轴旋转，Z轴指向屏幕外（默认Z轴） 右手螺旋定律
rotate(45deg)  // 沿Z轴,顺时针旋转45°
rotate(-45deg)  // 逆时针旋转45°
rotateY(45deg)  // 沿Y轴
rotateX(45deg)  // 沿X轴

1.3 scale()

缩放元素的width和height

scale(2); // 宽高放大2倍
scale(2,3); // 宽放大2倍，高放大3倍
scaleX(0.5); // 宽缩小2倍
scaleY(0.5);  // 高缩小2倍

1.4 skew()

使元素沿X和Y轴倾斜一定角度

skew(x, y)

skew(20deg)
skew(20deg, 45deg)
skewX(30deg)
skewY(30deg)

1.5 matrix()

scale、translate、skew的作用合

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

2. transition (过渡)

---

transition: property duration timing-function(可选) delay(可选);
transition: 属性 过渡时间 运动函数 延迟时间

transition: display 2s ease-in 1s

3. 动画animation + @keyframes

---

css动画使元素逐渐从一种样式变为另一种样式，为这个过程定义一些关键帧，来实现动画效果

属性:

animation-name 动画名（由@keyframes定义）
animation-duration 动画时间
animation-delay 动画延迟
animation-iteration-count 循环次数
animation-direction 是否轮流反向
animation-timing-function 动画时间函数
animation-fill-mode 动画暂停时的样式

3.1 @keyframes

规则:

1.使用关键字"from"、"to"来代表0和100%
2.或者使用0、 25%、 50%、 75% 100%等来定义关键帧的元素样式,从而实现过渡动画效果

@keyframes myAnimation{
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes myAnimation{
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

3.2 animation

animation: name duration timing-function(可选，默认平滑) delay(可选，默认0) 
           iteration-count(可选，默认0) direction(可选);

div{
  animation: example 5s linear 2s infinite alternate;
}
div{
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: -2s;  // 动画提前进行2s
  animation-count: infinite; // 无限循环
  animation-direction: alternate; // 前—后—前—后... ...  
}