关于CSS（第六章-动画与变形）

CSS动画-Animations

动画序列

通过keyframes来设置动画序列
关键帧用一个百分比来表示动画序列出现的时间,0%表示初始时间,100%表示结束时间,亦可用from跟to来表示.

p{
	animation-duration:3s;		//动画持续时间
	animation-name:move;		//动画名字
}

@keyframes move{
	from{						//初始时间
			margin-left:100%;		
			width:300%;
		}
	
	  to{						//结束时间
			margin-left:0%;
			width:100%;
		}
}

---

配置动画

• 动画持续时间 （animation-duration）

动画完成一个循环所需的时间长度。
单位s、ms,默认值为0s。

---

• 动画迭代次数（animation-iteration-count）

动画重复的次数。

<number>：默认值为1，不能为负数，可以为小数，比如0.5表示播放一半.

infinite：无限循环。

---

• 动画名字（animation-name）

可以与@keyframes中定义的名字绑定。

---

• 动画延迟（animation-delay）

动画延迟，即元素在加载成功后到动画运行前的时间。
单位为s、ms,默认值为0s，即动画加载成功后立刻运行。
例如：animation-delay:3s;

---

• 动画方向（animation-direction）

动画运行完是否交替方向或者是重置起点。

normal ：默认值，正常播放

reverse ：播放帧的顺序反转，播放的起点为帧的结束

alternate ：播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转。反转时ease-in交替为ease-out。

alternate-reverse ：与alternate类似，不过第一次播放时候需要反转。

---

• 暂停/恢复（animation-play-state）

动画的状态，可以通过Js查询该属性以确定该动画目前是运行还是停止，或者可以通过Js来设定动画的运行状态。

running ：运行状态

paused ：暂停状态

---

• 填充模式（animation-fill-mode）

指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。

none ：默认值

forwards ：目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
backwards ：目标将保留在执行期间所遇到的第一个关键帧所设置的计算值

---

• 动画速度曲线（animation-timing-function）

  ease ：默认值

  ease-in ：先慢后快

  ease-out ：先快后慢

  ease-in-out ：先慢后快再慢

  linear ：匀速增长

  ---

动画（transition）

CSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用CSStransitions后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

---

CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性)，何时开始(设置delay），持续多久(设置duration)以及如何动画(定义timingfuntion，比如匀速地或先快后慢)。

---

语法

div{
	transition:<property><duration><timing-function><delay>;
	}

transition是transition-property，transition-duration，transition-timing-function，transition-delay的速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟.

---

可以动画的CSS属性

一些CSS属性可以是动画的，也就是说，当它的值改变时，或者当CSS动画或CSS转换使用时，它可以以平滑的方式改变。

background	border
Box-shadow	flex
margin	padding
font	text
color	opacity
visibility	z-index
max-height	Max-width
width	height
Min-height	Min-width
top	outline
left	right

---

变形（transform）

现实生活中的绝大多数的动作都可以理解为变形后的结果。

---

语法

div{
	transform:xxx();
	transform-origin:center;
	}

transform用来指定一个变形函数对元素执行变形操作
transform-origin用于指定一个元素变形的原点

如果指定一个值left/center/right/top/bottom
如果指定两个值其中一个必须是length,percentage，或left,center,right关键字中的一个。另一个必须是length,percentage，或top,center,bottom关键字中的一个。

如果指定三个值前两个值和只有两个值时的用法相同，第三个值必须是length。
它始终代表Z轴偏移量

---

旋转（rotate）

该函数定义了一种将元素围绕一个定点旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

rotateX(angle)绕X轴旋转，例如单杠运动

rotateY(angle)绕Y轴旋转，例如钢管舞运动

rotateZ(angle)绕Z轴旋转，例如旋转盘。

rotate(angle)与rotateZ()一致。

---

倾斜（skew）

skew(ax,ay)函数表示对元素的剪切或者扭转，ax表示水平方向的扭转，ay表示垂直方向的扭转，也可以使用skewX(ax)和skewY(ay)

---

缩放（scale）

scale()函数能够更改元素的大小，scale变换的是通过矢量来实现，它的坐标定义了每个方向上的缩放比例。如果两个向量的坐标是相等的，缩放是均匀的

---

移动（translate）

translate(tx,ty)函数能够移动元素。tx为元素在水平方向上移动的距离，ty为元素在垂直方向上移动的距离。