Html、Css3动画效果

第九章 动画

9.1 transform动画

transform 2D变形

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值

skew()：倾斜函数，取值是一个度数值

div{
	transform:translate(100px,100px);
  transform:translate(100px,100px) scale(1.5)
}


rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状

9.2 transition过渡动画

transition: 要过度的属性 时间 过度函数 延迟时间；

transition: 要过度的属性  时间  过度函数  延迟时间；

要过的属性：可以使用 all 或者一个一个的写
时间：    单位s秒   ms毫秒
过度函数：
        ease：速度由快到慢（默认值）
        linear：速度恒速（匀速运动）
        ease-in：速度越来越快（渐显效果）
        ease-out：速度越来越慢（渐隐效果）
        ease-in-out：速度先加速再减速（渐显渐隐效果）

9.3 定义动画

/* 定义动画*/
@keyframes imgacion{
	0%{
		transform: rotate(0deg) scale(1);
	}
	100%{
		transform: rotate(360deg) scale(1.2);
	   }
	}
	/* 使用动画*/
	img:hover{
		animation-name: imgacion;
		animation-duration: 2s;
	}
}