[游戏开发]笔记--CSS3 2D3D转换，过渡，动画效果

1. 2D转换

2D 变换属性

下表列出了所有 2D 变换属性：

CSS 2D 转换方法

matrix() 方法：
matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

2. CSS 3D转换

CSS 转换属性

下表列出了所有 3D 变换属性：

CSS 3D 转换方法

3. CSS 过渡

CSS 过渡属性

下表列出了所有 CSS 过渡属性：

4. CSS 动画

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

@keyframes 规则
/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/*反向或交替运行动画*/
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

	normal - 动画正常播放（向前）。默认值
	reverse - 动画以反方向播放（向后）
	alternate - 动画先向前播放，然后向后
	alternate-reverse - 动画先向后播放，然后向前

指定动画的速度曲线
animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

	ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
	linear - 规定从开始到结束的速度相同的动画
	ease-in - 规定慢速开始的动画
	ease-out - 规定慢速结束的动画
	ease-in-out - 指定开始和结束较慢的动画
	cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

指定动画的填充模式
CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

	none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
	forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-			direction 和 animation-iteration-count）。
	backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-	direction），并在动画延迟期间保留该值。
	both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

动画简写属性
下例使用六种动画属性：
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
简写:
div {
  animation: example 5s linear 2s infinite alternate;
}