H5+CSS3简单动画 知识点 汇总

乱入几个： 

1.h5的一个语义化标签

  figure :用于规定独立的流内容（图像 图表 照片 代码等）

  figcapition：与figure配套使用，用于标签定义figure元素标题

2.媒体查询：

通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”： min-width;max-width 

  媒体查询能够用在@media和import规则上，也能够用在HTML和XML中。

 @media screen and (800px){...} 

 @import url(example.css) screen and (800px);

<link media="screen and (800px)" rel="stylesheet" href="example.css">

css3:

  长处：方便。无需js，适合做图片、文字的简单效果；

  缺点：不灵活；效果有限

划重点：

1. transform:变形。【transform：translate / rotete / scale / skew(平移 旋转，缩放。斜切)】
   

2. transition: 过渡。【transition： property, duration, timing-function（Linear,ease,ease-in,ease-out,ease-in-out）, delay】

• 必须要设置两个属性：  设置过渡效果的 CSS 属性的名称; 完毕过渡效果须要多少秒或毫秒。                

 3、animation:动画。【animation：name/ duration/ timing-function/ iteration-count(播放次数)/ direction/ play-stete】

详细介绍：

  Transform :用于元素的变形处理  属性:  translate,Rotate,scale,skew  (平移 ,旋转，缩放，斜切)

 

transition： 用于设置四个过渡属性 属性：property,duration,timing-function,delay

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完毕过渡效果须要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。  （Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay 定义过渡效果何时開始。

animation:全部动画属性的简写属性，除了 animation-play-state 属性。

animation-name 规定须要绑定到选择器的 keyframe 名称。。
animation-duration 规定完毕动画所花费的时间。以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画開始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

举例（chrome浏览器下）：

1. -webkit-animation: myfirst 2s linear 1s infinite both;

   -webkit-animation-name: myfirst;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-delay: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-play-state: running;

2. @-wbkit-keyframes myfirst {

      }

    -经常使用參考手冊-

属性	描写叙述	CSS
@keyframes	规定动画。	3
animation	全部动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完毕一个周期所花费的秒或毫秒。 默认是 0。	3
animation-timing-function	规定动画的速度曲线。 默认是 "ease"。	3
animation-delay	规定动画何时開始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在执行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?

) | cubic-bezier(<number>,<number>, <number>, <number>)

默认值：ease

适用于：全部元素。包括伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

• ease：平滑过渡。

  等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

• ease-in：由慢到快。

  等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

• ease-in-out：由慢到快再到慢。

  等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

• step-start：等同于 steps(1, start)

• step-end：等同于 steps(1, end)

• steps(<integer>[, [ start | end ] ]?)：接受两个參数的步进函数。

  第一个參数必须为正整数，指定函数的步数。

  第二个參数取值能够是start或end。指定每一步的值发生变化的时间点。

  第二个參数是可选的，默认值为end。

• cubic-bezier(<number>, <number>, <number>, <number>)：

• 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

默认值：none

适用于：全部元素，包括伪对象:after和:before

继承性：无

取值：

• none：默认值。

  不设置对象动画之外的状态

• forwards：设置对象状态为动画结束时的状态

• backwards：设置对象状态为动画開始时的状态

• both：设置对象状态为动画结束或開始的状态

说明：

检索或设置对象动画时间之外的状态

• 假设提供多个属性值。以逗号进行分隔。

• 相应的脚本特性为animationFillMode。

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

适用于：全部元素，包括伪对象:after和:before

继承性：无

取值：

• normal：正常方向

• alternate：正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动

• 假设提供多个属性值，以逗号进行分隔。

• 相应的脚本特性为animationDirection。