html css网页 动画,HTML CSS整理笔记 (九) CSS3做网页动画

——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 动画时间之外的状态、

HTML CSS整理笔记更多笔记