css3动画

transform 转化动画

• 旋转 ： rotate（）
• 平移动画：translate（）
• 变形：skew（）
• 伸缩动画：scale（）

transform转化动画还是直接动画，鼠标悬停时直接显示

<style>
	.block{
		width:100px;
		height:100px;
		border:1px solid red;

		transform-origin:0px 0px;//2d,3d转化中心设置 （中心位置设置
		transform-style:preserve-3d;//将2d动画转化为3d动画
	}
	.block:hover{
		//rotate 包含三种状态：x，y，z 三轴的变化
		//默认值时 z轴在变化
		transform:rotatez(45deg);

		//translate 也分为3个值 x，y，z
		transform:translatez(50px);

		//skew 分为两种 x，y
		transform:skewy(45deg);

		//scale  两个参数时  表示宽度比例和高度比例
		//scale  一个参数时  表示两个值 等比例变化
		transform:scale(0.5);
		transform:rotatez(45deg);
	}
</style>

过渡动画

过渡动画可以过渡元素的样式，也可以过渡元素的transform

<style>
	.block{
		width:100px;
		height:100px;
		border:1px solid red
		transition:height 3s 1s linear,width 2s 1s linear;
		transition-property:height;//过渡的属性
		transition-duration:3s;//过渡的时间
		transition-delay:1s;//多久开始执行（延时
		transition-timing-function:linear; //匀速运动
		
		transition:all .5s linear;//all：所有属性过渡
	}
	.block:hover{
		transform:rotatez(45deg);
		height:500px;
		width:200px;
	}
</style>

值	描述
linear 匀速运动（规定以相同速度开始至结束的过渡效果
ease	慢速开始，然后变快，然后慢速结束
ease-in	以慢速开始的过渡效果
ease-out	以慢速结束的过渡效果
ease-in-out	以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值