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;}
}