9 CSS3做网页动画-HTML CSS整理笔记-前端-IT技术博客

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



标签: htmlCSSCSS3网页动画