HTML动画

动画

过渡（transition）

指定一个属性发生变化时的切换方式

• transition-property：指定要执行的属性
• transition-duration：指定过渡效果的持续时间
• transition-timing-function：过渡的时序函数。
  – ease：默认值，慢速开始，先加速再减速
  – linear：匀速运动
  – ease-in：加速运动
  – ease-out：减速运动
  – ease-in-out：先加速再减速
  – cubic-bezier()：未指定时序函数
  – steps()：分步执行过渡效果
• transition-delay：过渡效果延迟，等待一段时间再执行

可以同时设置所有属性，transition。

动画（animation）

设置动画，必须先设置一个关键帧。

@keyframes test{
	/* from 表示动画开始的位置*/
	from{
		margin-left: 700px;
	}
	/* to 表示动画结束的位置*/
	to{
		margin-left: 0;
	}
}

• animation-name ：对当前元素生效的关键帧的名称
• animation-duration：动画执行的时间
• animation-delay：动画延迟执行的时间
• animation-iteration-count：动画执行的次数
• animation-direction：动画运行的方向
  – normal：从 from 向 to 运行
  – reverse：从 to 向 from 运行
  – alternate：从 from 向 to 运行，反复执行，重复执行时反向执行
  – alternate-reverse：从 to 向 from 运行，反复执行，重复执行时反向执行
• animation-play-state：设置动画的执行状态
  – running 默认值，运行
  – paused 暂停
• animation-iteration-count：动画执行次数
• animation-fill-mode：动画的填充模型

变形（transform）

通过CSS改变元素的形状或位置，不会影响页面的布局

平移

百分比是相对于自身

• translateX() ：沿X轴进行平移
• translateY() ：沿Y轴进行平移
• translateZ() ：沿Z轴进行平移，属于立体效果，想要看到效果，需要设置网页的视距（perspective）

旋转

• rotateX()：沿X轴旋转指定的角度，属于立体效果，想要看到效果，需要设置网页的视距（perspective）
• rotateY()：沿Y轴旋转指定的角度，属于立体效果，想要看到效果，需要设置网页的视距（perspective）
• rotateZ()：沿Z轴旋转指定的角度

缩放

• scaleX()：水平方向缩放
• scale()：垂直方向缩放
• scale()：双方向缩放