乱入几个：
1.h5的一个语义化标签
figure :用于规定独立的流内容（图像 图表 照片 代码等）
figcap IT ion：与figure配套使用，用于标签定义figure元素标题
2. 媒体查询 ：
通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width ;m ax-width
媒体查询可以用在 @media和import 规则上，也可以用在 HTML 和 XM L中。
@media screen and (width:800px){ .. .}
@import url(ex am ple.css) screen and (width:800px);
正题：
--page1 --
css属性
PR o PE rty,duration,timing-function,delay
| asp" title="CSS3 transition-property 属性">transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition -t iming-function | 规定速度效果的速度曲线。 （Linear,ease,ease -i n,ease-out,ease-in-out） |
| transition-delay | 定义过渡效果何时 开始 。 |
Transform : 用于元素的 变形 处理属性: translate,Rotate,scale,skew (平移 旋转，缩放，斜切)
--page 2 - vc D4KPG9sIGNsYXNzPQ == " list-paddingleft-2">
新建帧
animation: 所有动画属性的简写属性，除了 animation- play - stat e 属性。
- webkit -animation: my First 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 -s tate: running;
@-wbkit-keyframes myfirst {
}
-常用参考手册-
| @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 ： [, ]*
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( [, [ start | end ] ]?) | c ub ic-bezier( , , , )
默认& # 20540; ：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( [, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier( , , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-fill-mode：
animation-fill-mode ：none | forwa rds | backwards | both [ , none | forwards | backwards | both ]*
默认值 ：none
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationFillMode 。
animation-direction
animation-direction ：normal | alternate [ , normal | alternate ]*
默认值 ：normal
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
normal：
正常 方向
alternate：
正常与反向交替
说明：
检索或设置对象动画在循环中是否反向运动
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationDirection 。
-------------------------------------------------------------------
?
乱入几个：
1.h5的一个语义化标签
figure :用于规定独立的流内容（图像 图表 照片 代码等）
figcapition：与figure配套使用，用于标签定义figure元素标题
2. 媒体查询：
通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width;max-width
媒体查询可以用在 @media和import 规则上，也可以用在HT ML 和XML中。
@media screen and (width:800px){...}
@import url(example.css) screen and (width:800px);
正题：
--page1 --
css属性
property,duration,timing-function,delay
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 （Linear,ease,ease-in,ease-out,ease-in-out） |
| transition-delay | 定义过渡效果何时开始。 |
Transform : 用于元素的变形处理属性: translate,Rotate,scale,skew (平移 旋转，缩放，斜切)
--page 2 -
新建帧
animation: 所有动画属性的简写属性，除了 animation-play-state 属性。
-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;
@-wbkit-keyframes myfirst {
}
-常用参考手册-
| @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 ： [, ]*
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( [, [ start | end ] ]?) | cubic-bezier( , , , )
默认值 ：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( [, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier( , , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-fill-mode ：
animation-fill-mode ：none | forwards | backwards | both [ , none | forwards | backwards | both ]*
默认值 ：none
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationFillMode 。
animation-direction
animation-direction ：normal | alternate [ , normal | alternate ]*
默认值 ：normal
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
normal：
正常方向
alternate：
正常与反向交替
说明：
检索或设置对象动画在循环中是否反向运动
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationDirection 。
-------------------------------------------------------------------
2.理解CSS3 transform 中的Matrix(矩阵)
那 ax+cy+e 的意义 是什么 ？
记住了， ax+cy+e 为变换后的水平坐标， bx+dy+f 表示变换后的垂直位置。
又迷糊了？不急，一个 简单 例子就明白了。
假设矩阵参数如下：
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
现在，我们根据这个矩阵偏移元素的中心点，假设是 (0, 0) ，即 x=0 , y=0 。
于是，变换后的 x 坐标就是 ax+cy+e = 1*0+0*0+30 =30 , y 坐标就是 bx+dy+f = 0*0+1*0+30 =30 .
于是，中心点坐标从 (0, 0) 变成了→ (30, 30) 。对照上面有个 (30, 30) 的白点图，好好想象下， 原来 (0,0) 的位置，移到了白点的 (30, 30) 处，怎么样，是不是往右下方同时偏移了30像素哈！！
实际上 transform: matrix(1, 0, 0, 1, 30, 30); 就等同于 transform: translate(30px, 30px); . 注意： translate , rotate 等方法都是需要单位的，而 matrix 方法 e, f 参数的单位可以省略。
?
乱入几个：
1.h5的一个语义化标签
figure :用于规定独立的流内容（图像 图表 照片 代码等）
figcapition：与figure配套使用，用于标签定义figure元素标题
2.媒体查询：
通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width;max-width
媒体查询可以用在 @media和import 规则上，也可以用在HTML和XML中。
@media screen and (width:800px){...}
@import url(example.css) screen and (width:800px);
正题：
--page1 --
css属性
property,duration,timing-function,delay
| asp" title="CSS3 transition-property 属性">transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 （Linear,ease,ease-in,ease-out,ease-in-out） |
| transition-delay | 定义过渡效果何时开始。 |
Transform : 用于元素的变形处理属性: translate,Rotate,scale,skew (平移 旋转，缩放，斜切)
--page 2 - vc D4KPG9sIGNsYXNzPQ==" list-paddingleft-2">
新建帧
animation: 所有动画属性的简写属性，除了 animation-play-state 属性。
-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;
@-wbkit-keyframes myfirst {
}
-常用参考手册-
| @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 ： [, ]*
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( [, [ start | end ] ]?) | cubic-bezier( , , , )
默认值 ：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( [, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier( , , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-fill-mode：
animation-fill-mode ：none | forwards | backwards | both [ , none | forwards | backwards | both ]*
默认值 ：none
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationFillMode 。
animation-direction
animation-direction ：normal | alternate [ , normal | alternate ]*
默认值 ：normal
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
normal：
正常方向
alternate：
正常与反向交替
说明：
检索或设置对象动画在循环中是否反向运动
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationDirection 。
-------------------------------------------------------------------
?
乱入几个：
1.h5的一个语义化标签
figure :用于规定独立的流内容（图像 图表 照片 代码等）
figcapition：与figure配套使用，用于标签定义figure元素标题
2. 媒体查询：
通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width;max-width
媒体查询可以用在 @media和import 规则上，也可以用在HTML和XML中。
@media screen and (width:800px){...}
@import url(example.css) screen and (width:800px);
正题：
--page1 --
css属性
property,duration,timing-function,delay
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 （Linear,ease,ease-in,ease-out,ease-in-out） |
| transition-delay | 定义过渡效果何时开始。 |
Transform : 用于元素的变形处理属性: translate,Rotate,scale,skew (平移 旋转，缩放，斜切)
--page 2 -
新建帧
animation: 所有动画属性的简写属性，除了 animation-play-state 属性。
-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;
@-wbkit-keyframes myfirst {
}
-常用参考手册-
| @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 ： [, ]*
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( [, [ start | end ] ]?) | cubic-bezier( , , , )
默认值 ：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( [, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier( , , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-fill-mode ：
animation-fill-mode ：none | forwards | backwards | both [ , none | forwards | backwards | both ]*
默认值 ：none
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationFillMode 。
animation-direction
animation-direction ：normal | alternate [ , normal | alternate ]*
默认值 ：normal
适用于 ：所有元素，包含伪对象:after和:before
继承性 ：无
取值：
normal：
正常方向
alternate：
正常与反向交替
说明：
检索或设置对象动画在循环中是否反向运动
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为 animationDirection 。
-------------------------------------------------------------------
2.理解CSS3 transform 中的Matrix(矩阵)
那 ax+cy+e 的意义是什么？
记住了， ax+cy+e 为变换后的水平坐标， bx+dy+f 表示变换后的垂直位置。
又迷糊了？不急，一个简单例子就明白了。
假设矩阵参数如下：
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
现在，我们根据这个矩阵偏移元素的中心点，假设是 (0, 0) ，即 x=0 , y=0 。
于是，变换后的 x 坐标就是 ax+cy+e = 1*0+0*0+30 =30 , y 坐标就是 bx+dy+f = 0*0+1*0+30 =30 .
于是，中心点坐标从 (0, 0) 变成了→ (30, 30) 。对照上面有个 (30, 30) 的白点图，好好想象下，原来 (0,0) 的位置，移到了白点的 (30, 30) 处，怎么样，是不是往右下方同时偏移了30像素哈！！
实际上 transform: matrix(1, 0, 0, 1, 30, 30); 就等同于 transform: translate(30px, 30px); . 注意： translate , rotate 等方法都是需要单位的，而 matrix 方法 e, f 参数的单位可以省略。
?
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-H5+CSS3简单动画 知识点 汇总 全部内容，希望文章能够帮你解决 html5教程-H5+CSS3简单动画 知识点 汇总 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-H5+CSS3简单动画 知识点 汇总的详细内容...