CSS3动画

[GGXXMM]

一、animation动画

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: boxChange 3s ease;
  -webkit-animation: boxChange 3s ease;
}
@keyframes boxChange {
  from {background: red;}
  to {background: yellow;}
}
@-webkit-keyframes boxChange {
  from {background: red;}
  to {background: yellow;}
}

animation: animation-name animation-duration animation-timing-function animation-delay animation-delay animation-direction animation-play-state;

二、transition过渡

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  -webkit-transition: width 2s;
}
.box:hover {
  width: 300px;
}

transition: transition-property transition-duration transition-timing-function transition-delay;

三、transform转换

2D转换

• translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
• rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
• scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
• skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
• matrix() 合并方法，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

matrix(a,b,c,d,e,f) 变换后的x坐标：ax+by+e；y坐标：bx+dy+f
参考：https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/

3D转换

• rotateX() 围绕其在一个给定度数X轴旋转的元素。
• rotateY() 围绕其在一个给定度数Y轴旋转的元素。
• transform-origin 允许您更改转换元素的位置。
• transform-style 指定嵌套元素是怎样在三维空间中呈现。
• perspective 允许你改变3D元素是怎样查看透视图。
• perspective-origin 定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
• backface-visibility 定义该元素背向屏幕时是否可见。