Html、Css3动画效果
文章目录
- 第九章 动画
- 9.1 transform动画
- 9.2 transition过渡动画
- 9.3 定义动画
第九章 动画
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;}
}