CSS3动画，2D

2D

---

转换 transform

可以控制元素做转换：移动(translate)、旋转(rotate)、缩放(scale)

只能设定一次，不会影响到其它元素的位置

移动：translate(x,y) / translateX(n) / translateY(n)

• 百分比是相对于自身元素的
• 对行内标签没有效果

/* 基本示例 */
div {
	width: 100px;
	height: 100px;
	background-color: #ff0000;
	transform: translate(100px, 200px);
	/* transform: translateX(100px);
	transform: translateY(200px); */
}

/* 常见水平垂直居中效果 */
div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 100px;
	background-color: #ff0000;
	transform: translate(-50%, -50%);
}

旋转：rotate(90deg)

旋转中心点：transform-origin:x y (left top / right bottom / 10px 10px)

/* 基本示例 */
div {
	width: 100px;
	height: 100px;
	background-color: #ff0000;
	transform: rotate(45deg);
	transform-origin: 10px 10px;
}

缩放：scale(n) (2,1 / 1,2 / 2) 默认值是1

/* 基本示例 */
div:hover {
	transform: scale(2);
}

可以合并写：transform: translate(200px, 100px) scale(2) rotate(180deg);

---

过渡 transition

• property 控制的属性 all / width / width height
• duration 过渡持续时间 5s
• timing-function （可选）
  - linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
  - ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
  - ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
  - ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
  - ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
  - cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
• delay （可选）过渡开始等待时间 1s

要哪个元素动，就给哪个元素加

---

动画 animation

可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果；

• @keyframes 规定动画。

@keyframes move {
	0% {
	transform: translate(0px);
	width: 100px;
	}
	25% {
	transform: translate(150px);
	}
	75% {
	transform: translate(50px);
	}
	100% {
	transform: translate(0px);
	width: 300px;
	}
}

• animation-name 规定 @keyframes 动画的名称。

	animation-name:move; //对应上面的keyframes

• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

   animation-duration:2s;

• animation-timing-function 规定动画的速度曲线。默认是 “ease”。

	linear	动画从头到尾的速度是相同的。
	ease	默认。动画以低速开始，然后加快，在结束前变慢。
	ease-in	动画以低速开始。
	ease-out	动画以低速结束。
	ease-in-out	动画以低速开始和结束。
	cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• animation-delay 规定动画何时开始。默认是 0。

	animation-delay:2s;

• animation-iteration-count 规定动画被播放的次数。默认是 1。

	n	定义动画播放次数的数值。
	infinite	规定动画应该无限次播放。

• animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。

	normal	默认值。动画应该正常播放。
	alternate	动画应该轮流反向播放。

• animation-play-state（不可写入动画综合中） 规定动画是否正在运行或暂停。默认是 “running”。

   paused	规定动画已暂停。
   running	规定动画正在播放。

• animation-fill-mode 规定对象动画时间之外的状态。

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

动画综合 animation

	animation:name duration timing-function delay iteration-count direction fill-mode;
	/* 基本示例 */
	animation: move1 2s linear 0s 1 normal forwards;

• name @keyframe 动画名称
• duration 动画时长
• timing-function 速度曲线
  • linear 动画从头到尾的速度是相同的。
  • ease 默认。动画以低速开始，然后加快，在结束前变慢。
  • ease-in 动画以低速开始。
  • ease-out 动画以低速结束。
  • ease-in-out 动画以低速开始和结束。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  • steps(n) 步长，分几步完成，会产生停顿效果
• delay 开始时间
• iteration-count 播放次数
  • n 次数
  • infinite 无限循环
• direction 动画方向
  • normal 默认值。动画应该正常播放。
  • alternate 动画应该轮流反向播放。
• fill-mode 动画结束态
  • none 不改变默认行为。
  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  • both 向前和向后填充模式都被应用。