你我学习网
完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245
——9 CSS3做网页动画——
54.transform变形：
指效果的集合，如平移、旋转、缩放、倾斜效果。
语法 transform:[transform-function]*;
其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。
常用2D变形函数如下：
(1)translate(tx,ty)：
- 平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。
- tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。
- ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。
(2)scale(sx,sy)：
- 缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。
- sx表示宽度即横坐标方向的缩放量。
- sy表示高度即纵坐标方向的缩放量。
(3)rotate(a)；
- 旋转函数，只取一个值为度数值,单位deg表示角度°
- 正值顺时针转，负值逆时针转。
- rotate函数只旋转，不改变元素形状。
(4)skew(ax,ay)：
- 倾斜函数，取值为度数值，单位deg
- ax表示水平方向即X轴的倾斜角度。
- ay表示垂直方向即Y轴的倾斜角度。
55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数
56.transition过渡：
指动画转换的过程，如渐现、渐弱、动画快慢等。
通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。
语法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间
主要包括四个属性值：
(1)transition-property：
过渡属性，设置过渡或动态模拟的CSS属性
(2)transition-duration：
过渡用时，从旧属性到新属性的用时，单位为s
(3)transition-timing-function：
指定过渡函数、过渡速度,有以下方式：
- ease 速度由快到慢，逐渐变慢(默认)
- liner 匀速
- ease-in 越来越快(渐显)
- ease-out 越来越慢(渐隐)
- ease-in-out 先加速再减速(渐显渐隐)
(4)transition-delay：设置过渡是否延迟时间执行。
注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。
57.总结如何用transition实现过渡动画：
(1)在默认样式中声明元素的初始状态。
(2)声明过渡元素之中状态样式，如悬浮状态
(3)在默认样式中通过添加过渡函数，添加不同的样式。
58.过渡的触发机制：
(1)伪类触发: :hover、 :active、 :focus、 :checked等
(2)媒体查询：通过@media属性判断设备的尺寸、方向等。
(3)JavaScript触发：用JavaScript脚本触发。
59.animation动画
animation制作动画的步骤:
(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；
其中@keyframes称为关键帧，可以设置多段属性。语法
@keyframes 动画名称{
from{ //css样式代码 }
百分比1{ //css样式 }
百分比2{ //css样式 }
100%{ //css样式 }
}
(2)找到要设置动画的元素，调用关键帧已声明的动画。
如 animation: spread(动画名) 2s linear(匀速);
60.animation动画的语法和属性：
" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
其中属性分别为：
- animation-name 动画名称、
- animation-duration 播放时间、
- animation-timing-function 播放方式、
- animation-delay 开始播放的时间、
- animation-iteration-count 播放次数(无限次用infinite)、
- animation-diriection 播放方向、
- animation-play-state 播放状态、
- animation-fill-mode 动画时间之外的状态、
